programming javascript

Xác thực JavaScript đầu vào

Xác thực biểu mẫu thường được sử dụng để xảy ra tại máy chủ, sau khi khách hàng đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Gửi. Nếu dữ liệu do khách hàng nhập không chính xác hoặc đơn giản là bị thiếu, máy chủ sẽ phải gửi lại tất cả dữ liệu cho khách hàng và yêu cầu gửi lại biểu mẫu với thông tin chính xác. Đây thực sự là một quá trình dài, từng gây ra rất nhiều gánh nặng cho máy chủ

JavaScript cung cấp một cách để xác thực dữ liệu của biểu mẫu trên máy tính của khách hàng trước khi gửi nó đến máy chủ web. Xác thực biểu mẫu thường thực hiện hai chức năng

Xác thực cơ bản - Trước hết, biểu mẫu phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc đều được điền vào. Nó sẽ chỉ yêu cầu một vòng lặp qua từng trường trong biểu mẫu và kiểm tra dữ liệu
Xác thực định dạng dữ liệu - Thứ hai, dữ liệu được nhập phải được kiểm tra về hình thức và giá trị chính xác. Mã của bạn phải bao gồm logic phù hợp để kiểm tra tính chính xác của dữ liệu

Thí dụ

Chúng tôi sẽ lấy một ví dụ để hiểu quá trình xác nhận. Đây là một hình thức đơn giản ở định dạng html

   
   
      Form Validation      
            
   
   
   
      
         
            
            
               Name
               
            
            
            
               EMail
               
            
            
            
               Zip Code
               
            
            
            
               Country

đầu ra

Xác thực biểu mẫu cơ bản

Trước tiên, chúng ta hãy xem cách thực hiện xác thực biểu mẫu cơ bản. Ở biểu mẫu trên, chúng tôi đang gọi validate[] để xác thực dữ liệu khi sự kiện onsubmit đang diễn ra. Đoạn mã sau đây cho thấy việc triển khai hàm validate[] này

Xác thực định dạng dữ liệu

Bây giờ chúng ta sẽ xem cách chúng ta có thể xác thực dữ liệu biểu mẫu đã nhập trước khi gửi nó đến máy chủ web

Ví dụ sau đây cho thấy cách xác thực địa chỉ email đã nhập. Một địa chỉ email phải có ít nhất một dấu ‘@’ và một dấu chấm [. ]. Ngoài ra, '@' không được là ký tự đầu tiên của địa chỉ email và dấu chấm cuối cùng ít nhất phải là một ký tự sau dấu '@'

Điều quan trọng là phải xác thực biểu mẫu do người dùng gửi vì nó có thể có các giá trị không phù hợp. Vì vậy, xác thực là phải để xác thực người dùng

JavaScript cung cấp cơ sở để xác thực biểu mẫu ở phía máy khách nên việc xử lý dữ liệu sẽ nhanh hơn so với xác thực phía máy chủ. Hầu hết các nhà phát triển web thích xác thực biểu mẫu JavaScript

Thông qua JavaScript, chúng tôi có thể xác thực tên, mật khẩu, email, ngày, số điện thoại di động và nhiều trường khác

Ví dụ xác thực biểu mẫu JavaScript

Trong ví dụ này, chúng tôi sẽ xác thực tên và mật khẩu. Tên không được để trống và mật khẩu không được dài dưới 6 ký tự

Ở đây, chúng tôi đang xác thực biểu mẫu khi gửi biểu mẫu. Người dùng sẽ không được chuyển tiếp đến trang tiếp theo cho đến khi các giá trị đã cho là chính xác

Kiểm tra nó ngay bây giờ

Xác thực lại mật khẩu JavaScript

Kiểm tra nó ngay bây giờ

Xác thực số JavaScript

Hãy xác thực trường văn bản chỉ cho giá trị số. Ở đây, chúng tôi đang sử dụng hàm isNaN[]

Kiểm tra nó ngay bây giờ

Xác thực JavaScript với hình ảnh

Hãy xem một ví dụ xác thực biểu mẫu JavaScript tương tác hiển thị hình ảnh chính xác và không chính xác nếu đầu vào đúng hoặc sai

Khi người dùng cố gắng gửi biểu mẫu HTML, trình duyệt của họ trước tiên sẽ thực hiện xác thực phía máy khách để kiểm tra xem dữ liệu biểu mẫu có hợp lệ không. Điều này được thực hiện bằng cách so sánh tất cả các giá trị đầu vào với các ràng buộc của chúng, được xác định thông qua như

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

1, v.v. Nếu đầu vào không hợp lệ, trình duyệt sẽ tập trung vào đầu vào đó và hiển thị chú giải công cụ làm rõ lỗi của người dùng

Tuy nhiên, không phải lúc nào bạn cũng muốn [hoặc cần] gửi biểu mẫu. Đôi khi, bạn chỉ muốn sử dụng một biểu mẫu để truy xuất thông tin nhập của người dùng nhưng lưu trữ các giá trị đó như một phần trạng thái ứng dụng của bạn ở phía máy khách. Thật không may, điều này có nghĩa là bạn bỏ lỡ hành vi xác thực tự động này vì bạn không còn sử dụng biểu mẫu có thể gửi nữa

Nhưng tin tốt là chúng ta vẫn có thể xác thực đầu vào mà không cần biểu mẫu hoặc nút gửi. Và chúng tôi có thể làm điều này mà không cần phát minh lại bánh xe hoặc tạo ra các vấn đề về khả năng truy cập cho người dùng của chúng tôi. Tất cả những gì chúng ta cần làm là sử dụng các phương thức mà trình duyệt đã cung cấp để xác thực đầu vào HTML. Trong bài viết này, chúng ta sẽ xem xét cách bạn có thể xác thực các đầu vào độc lập bằng cách sử dụng

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2. Chúng tôi cũng sẽ xem xét hai cách tiếp cận để cung cấp phản hồi xác thực cho người dùng.

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 để xác thực gốc và cách tiếp cận tùy chỉnh với JavaScript

Mục lục

Trước khi chúng tôi tiếp tục, tôi muốn lưu ý hai lưu ý về xác thực phía máy khách cho các biểu mẫu HTML

Đầu tiên, mặc dù nó có thể mang lại trải nghiệm người dùng tốt hơn vì nó cho phép bạn cung cấp phản hồi theo thời gian thực cho người dùng khi họ điền vào biểu mẫu của bạn, nhưng nó hoàn toàn phụ thuộc vào việc tải JavaScript [hoàn toàn hoặc chính xác]. Nếu người dùng duyệt ứng dụng của bạn với JavaScript bị tắt [do tự nguyện hoặc vì một số lý do khác], biểu mẫu của bạn sẽ không hoạt động nếu không có nút gửi

Thứ hai, điều quan trọng là phải hiểu rằng không nên dựa vào xác thực phía máy khách đối với bất kỳ dữ liệu nào mà bạn định gửi đến máy chủ sau này. Phương pháp được mô tả trong hướng dẫn này chỉ dành cho xác thực phía máy khách trong các ứng dụng đang lưu trữ thông tin nhập của người dùng ở trạng thái cục bộ. Trong trường hợp này, vì chúng tôi không xử lý bất kỳ logic phía máy chủ nào nên chúng tôi không cần lo lắng về vấn đề này

Trong các phần tiếp theo, chúng ta sẽ tìm hiểu cách thực hiện xác thực phía máy khách bằng HTML và JavaScript

Giả sử chúng ta có một đầu vào chấp nhận một số nguyên chẵn từ

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

5 đến

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

6, bao gồm cả

________số 8

Nhiệm vụ đầu tiên của chúng tôi là xác định xem giá trị hiện tại của đầu vào này có hợp lệ hay không. Chúng tôi có thể kiểm tra thủ công và cố gắng giải thích tất cả các trạng thái lỗi có thể xảy ra, nhưng điều đó sẽ rất tẻ nhạt và dễ xảy ra lỗi, đặc biệt đối với các biểu mẫu lớn. Ngoài ra, nếu HTML của đầu vào thay đổi—chẳng hạn như nếu chúng tôi quyết định tăng giá trị tối đa được phép của nó—chúng tôi cần cập nhật mã của mình để mã không còn bị lỗi đồng bộ nữa

Một số thuộc tính đầu vào ngăn người dùng nhập các giá trị không được phép. Ví dụ:

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

7 ngăn người dùng nhập văn bản. Ngược lại, trong khi các thuộc tính

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

9 và

20 xác định các giới hạn cho giá trị, thì đầu vào không thực sự thực thi các yêu cầu đó vì người dùng vẫn có thể truy cập và nhập giá trị không hợp lệ theo cách thủ công, chẳng hạn như

21. Ở trạng thái hiện tại, thông tin đầu vào này sẽ không cung cấp bất kỳ phản hồi nào cho người dùng để cho biết rằng giá trị họ đã nhập không được phép vì thông tin đầu vào không phải là một phần của biểu mẫu có thể gửi

May mắn thay, chúng ta vẫn có thể kết nối vào cùng một phương thức mà các biểu mẫu sử dụng dưới mui xe khi chúng thực hiện xác thực nguyên bản. Mọi phần tử đầu vào HTML [và phần tử biểu mẫu. ] có phương thức

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2 trả về

23 nếu giá trị hiện tại của nó hợp lệ và ngược lại là

24. Chúng ta sẽ muốn gọi phương thức này bất cứ khi nào sự kiện

25 của đầu vào kích hoạt, báo hiệu rằng người dùng đã hoàn tất giá trị cho đầu vào đó [bằng cách làm mờ đầu vào hoặc nhấn phím Enter]

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Về lý thuyết, chúng ta cũng có thể làm điều này để đáp lại sự kiện

26, sự kiện này kích hoạt bất cứ khi nào giá trị của đầu vào thay đổi. Nhưng điều này không được khuyến nghị vì lý do hiệu suất và trải nghiệm người dùng. Trong phần tiếp theo, chúng tôi sẽ hiển thị một số giao diện người dùng thông báo lỗi cho người dùng của mình;

Đầu vào xác thực giá trị của nó bằng cách so sánh nó với các ràng buộc HTML của chính nó. Trong ví dụ này, các ràng buộc đó được thực thi bởi các thuộc tính

28,

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

9 và

20, yêu cầu người dùng nhập một số nguyên chẵn. Nếu người dùng nhập một giá trị không hợp lệ, chẳng hạn như

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

52, phương thức

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2 sẽ trả về

Trong khi chúng tôi ở đây, chúng tôi cũng nên đặt thuộc tính

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

55 trên đầu vào. Điều này được sử dụng để truyền đạt trạng thái hợp lệ của đầu vào cho trình đọc màn hình và vấn đề chỉ là đặt thuộc tính cho mọi sự kiện

25, như thế này

Nếu

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

58, trình đọc màn hình sẽ xác định đầu vào là không hợp lệ

Tại thời điểm này, chúng tôi biết nếu đầu vào của người dùng không hợp lệ. Bây giờ, việc chúng ta cần làm là thông báo lỗi xác thực [nếu có] cho người dùng. Tùy thuộc vào cảm nhận của bạn về xác thực đầu vào gốc, có hai cách tiếp cận bạn có thể xem xét

Ngoài

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2, các phần tử đầu vào và biểu mẫu HTML còn có một phương thức

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3. Giống như

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2, phương thức này trả về

23 nếu đầu vào hoặc biểu mẫu hợp lệ và

24 nếu ngược lại. Nhưng nó còn làm được nhiều hơn thế dưới mui xe. Khi được gọi trên một đầu vào,

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 sẽ tập trung vào đầu vào đó và hiển thị chú giải công cụ xác thực gốc—chính xác chú giải công cụ mà người dùng sẽ thấy nếu chúng tôi đang sử dụng biểu mẫu có thể gửi. Điều này có nghĩa là chúng ta có thể loại bỏ hoàn toàn

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2 và chỉ sử dụng

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 ở vị trí của nó. Dưới đây là trình xử lý sự kiện thay đổi giống như trước đây, ngoại trừ chúng tôi đã thay thế

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

2 bằng

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Trình đọc màn hình sẽ thuật lại cảnh báo một cách chính xác và người dùng sáng mắt sẽ thấy thông báo ở dạng chú giải công cụ quen thuộc có kiểu dáng tùy thuộc vào trình duyệt đang được sử dụng. Trình duyệt cũng có thể đề xuất cách người dùng có thể sửa thông tin nhập của họ. Quay trở lại ví dụ trước của chúng tôi, nếu người dùng nhập một số lẻ, trình duyệt sẽ đề xuất hai số gần nhất

Trong hầu hết các trường hợp, xác thực gốc hoạt động tốt. Nhưng có một số nhược điểm khi sử dụng

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3. Một là chú giải công cụ không thể được tạo kiểu, vì vậy nếu các nhà thiết kế của bạn khăng khăng tùy chỉnh giao diện của nó, bạn sẽ không gặp may. Một vấn đề khác là các trình duyệt trước đây không nhất quán trong cách chúng triển khai một số API này, vì vậy bạn có thể cần kiểm tra kỹ điều này với các trình đọc màn hình, trình duyệt, thiết bị và người dùng khác nhau. Ví dụ: chuyên gia tư vấn về khả năng tiếp cận kỹ thuật số Adrian Roselli khuyên bạn nên tránh xác thực gốc vì một số điều kỳ quặc, như thực tế là cửa sổ bật lên xác thực tự động ẩn trên Chrome sau một khoảng thời gian nhất định, thực tế là mẫu không khớp không được thông báo cho người dùng và nhiều vấn đề khác

Nếu bạn thấy rằng một số hành vi này là không thể chấp nhận được, bạn có thể cần triển khai giải pháp xử lý lỗi tùy chỉnh phản ánh chức năng gốc do trình duyệt cung cấp. Vì điều này sẽ yêu cầu toàn bộ bài báo riêng, tôi sẽ trình bày ngắn gọn một số cân nhắc quan trọng nhất. Để thảo luận sâu hơn, hãy xem bài viết của Oliver James về xác thực biểu mẫu gốc tốt hơn

Đầu tiên là đảm bảo đầu vào nhận được thuộc tính

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

41 trỏ đến thông báo xác thực để trình đọc màn hình thuật lại thông báo đó khi đầu vào nhận được tiêu điểm

Bạn có thể làm điều này một cách tĩnh

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Hoặc theo lập trình, giả sử bạn đã cung cấp cho đầu vào của mình một thuộc tính

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

43 hoặc

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

44 duy nhất

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Ngoài ra, như Adrian lưu ý, bạn nên tránh hiển thị thông báo lỗi bên dưới các trường nhập vì chúng có thể bị giao diện người dùng khác che khuất, chẳng hạn như danh sách thả xuống tự động hoàn thành

Nếu bạn muốn sử dụng lại thông báo xác thực gốc mà trình duyệt đã hiển thị trong

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3, bạn vẫn có thể truy cập thông báo đó qua

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

46 và hiển thị thông báo đó trong thành phần lỗi

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Nếu bạn quyết định từ bỏ thông báo xác thực gốc và sử dụng các chuỗi tùy chỉnh, hãy đảm bảo sử dụng từ ngữ rõ ràng để người dùng có thể sửa lỗi của họ. Tránh sử dụng các thông báo lỗi chung chung, không rõ ràng như “thông tin nhập không hợp lệ” hoặc “vui lòng sửa thông tin nhập của bạn. ” Đừng chỉ nói rằng người dùng đã mắc lỗi—hãy làm rõ lý do tại sao đó là lỗi hoặc cách họ có thể sửa lỗi đó

Trình đọc màn hình thường không tường thuật HTML được chèn động hoặc thay đổi đối với các thuộc tính HTML trong thời gian chạy, do đó, người dùng trình đọc màn hình không có cách nào biết rằng thông tin nhập của họ không hợp lệ trong triển khai hiện tại của chúng tôi

Để khắc phục điều này, chúng tôi cần tự động lấy tiêu điểm đầu vào không hợp lệ vào lần đầu tiên người dùng cố gắng điều hướng khỏi nó

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Lưu ý rằng đây là hành vi mặc định khi người dùng gửi biểu mẫu—

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 được gọi trên phần tử biểu mẫu, từ đó tập trung vào đầu vào không hợp lệ đầu tiên và hiển thị thông báo lỗi. Ngoài ra, chúng tôi chỉ làm điều này lần đầu tiên khi đầu vào không hợp lệ. Nếu bạn đang sử dụng khung JavaScript, bạn chỉ có thể duy trì một số trạng thái hợp lệ cục bộ trong thành phần đầu vào của mình

Nếu người dùng bắt đầu sửa thông tin nhập của họ, thông báo xác thực của chúng tôi sẽ kéo dài cho đến khi họ thực hiện lại giá trị cho thông tin đầu vào bằng cách làm mờ thông báo đó hoặc nhấn phím Enter. Thật không may, điều này có thể tạo ra trải nghiệm khó hiểu cho người dùng sáng mắt, đặc biệt nếu giá trị mới được cam kết không xác thực được vì lý do tương tự như trước đây—thông báo sẽ không thay đổi rõ ràng, vì vậy người dùng sẽ không có cách nào để biết liệu đó có phải là lỗi hay không . Để khắc phục điều này, chúng tôi có thể thêm trình xử lý sự kiện

26 và xóa thông báo lỗi và trạng thái

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Bây giờ, ngay khi người dùng bắt đầu nhập thông tin đầu vào đó, chúng tôi sẽ xóa trạng thái lỗi và thông báo xác thực của nó. Sau đó, khi người dùng đề xuất lại giá trị, trình xử lý sự kiện

25 của chúng tôi sẽ chạy lại và chu kỳ lặp lại cho đến khi người dùng sửa thành công thông tin nhập của họ

Trong các ví dụ mà chúng tôi đã xem xét cho đến nay, chúng tôi chỉ kiểm tra xem đầu vào có giá trị hợp lệ hay không hợp lệ, nhưng chúng tôi chưa bao giờ xác định lý do tại sao việc xác thực không thành công. Và đó là điều được mong đợi—bạn thường không cần phải tự làm việc này vì

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 đã xác định tình trạng lỗi cho chúng tôi và báo cáo một thông báo lỗi thích hợp. Nhưng nếu bạn thực sự cần biết lý do tại sao xác thực đầu vào không thành công—chẳng hạn như nếu bạn đang triển khai giao diện người dùng thông báo lỗi tùy chỉnh—bạn có thể kiểm tra

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

12. Đây là đối tượng

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

13 chứa các cờ boolean cho các điều kiện lỗi sau

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Ví dụ: giả sử chúng ta có trường văn bản chỉ chấp nhận các chữ cái chứ không chấp nhận số

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

Nếu giá trị hiện tại của đầu vào này chứa một số, thì

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

24 sẽ là

23. Sau đó, bạn có thể kiểm tra điều kiện này và xử lý nó phù hợp trong mã của mình

Khi một biểu mẫu HTML được gửi, trình duyệt sẽ xác thực từng đầu vào và báo cáo mọi sự cố. Nhưng không phải lúc nào bạn cũng muốn hoặc cần gửi dữ liệu biểu mẫu đến phần cuối. Nếu tất cả những gì bạn muốn là sử dụng một biểu mẫu để nhận đầu vào của người dùng và lưu trữ nội dung đó cục bộ trong trạng thái ứng dụng của bạn, bạn có thể sử dụng các phương pháp

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

3 và

const input = document.querySelector['#input'];
input.addEventListener['change', [e] => {
  const isValid = e.target.checkValidity[];
  console.log[isValid];
}];

28 để cung cấp phản hồi cho người dùng. Bạn cũng có thể sử dụng lại một số phương pháp này để triển khai xác thực đầu vào tùy chỉnh

Bình luận

Bình luận trên GitHub

Hệ thống nhận xét được cung cấp bởi API vấn đề GitHub. Bạn có thể tìm hiểu thêm về cách tôi xây dựng nó hoặc đăng nhận xét trên GitHub và nó sẽ hiển thị bên dưới sau khi bạn tải lại trang này

JavaScript có thể xác thực đầu vào của người dùng không?

Xác thực phía máy khách diễn ra bằng cách sử dụng thuộc tính HTML5 và JavaScript phía máy khách . Bạn có thể nhận thấy rằng trong một số biểu mẫu, ngay khi bạn nhập địa chỉ email không hợp lệ, biểu mẫu sẽ báo lỗi "Vui lòng nhập email hợp lệ". Loại xác thực ngay lập tức này thường được thực hiện thông qua JavaScript phía máy khách.

Làm cách nào để xác thực đầu vào số trong JavaScript?

Cách tiếp cận. Chúng tôi đã sử dụng hàm isNaN[] để xác thực trường văn bản chỉ cho giá trị số. Dữ liệu trường văn bản được truyền vào hàm và nếu dữ liệu được truyền là số thì isNan[] trả về true và nếu dữ liệu không phải là số hoặc kết hợp cả số và bảng chữ cái thì trả về false.

Xác thực đầu vào trong JavaScript là gì?

Xác thực dữ liệu là quá trình đảm bảo rằng đầu vào của người dùng rõ ràng, chính xác và hữu ích . Các nhiệm vụ xác thực điển hình là. người dùng đã điền vào tất cả các trường bắt buộc chưa?

Làm cách nào để xác thực một giá trị trong JavaScript?

Xác thực số JavaScript .

chức năng xác nhận [] {

var num=tài liệu. hình thức của tôi. con số. giá trị;

nếu [isNaN[num]]{

tài liệu. getElementById["numloc"]. innerHTML="Chỉ nhập giá trị số";

trả về sai;

}khác{

trả về đúng;

Thí dụ

đầu ra

Xác thực biểu mẫu cơ bản

Xác thực định dạng dữ liệu

Ví dụ xác thực biểu mẫu JavaScript

Xác thực lại mật khẩu JavaScript

Xác thực số JavaScript

Xác thực JavaScript với hình ảnh

Mục lục

Bình luận

JavaScript có thể xác thực đầu vào của người dùng không?

Làm cách nào để xác thực đầu vào số trong JavaScript?

Xác thực đầu vào trong JavaScript là gì?

Làm cách nào để xác thực một giá trị trong JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề