Có trình xác thực cho JavaScript không?

Xác thực mẫu là gì?

Truy cập bất kỳ trang web phổ biến nào có biểu mẫu đăng ký và bạn sẽ nhận thấy rằng họ cung cấp phản hồi khi bạn không nhập dữ liệu của mình theo định dạng họ mong đợi. Bạn sẽ nhận được các tin nhắn như

• "Trường này là bắt buộc" (Bạn không thể để trống trường này)
• "Vui lòng nhập số điện thoại của bạn ở định dạng xxx-xxxx" (Định dạng dữ liệu cụ thể là bắt buộc để nó được coi là hợp lệ)
• "Vui lòng nhập địa chỉ email hợp lệ" (dữ liệu bạn nhập không đúng định dạng)
• "Mật khẩu của bạn cần dài từ 8 đến 30 ký tự và chứa một chữ cái viết hoa, một ký hiệu và một số. " (Cần có định dạng dữ liệu rất cụ thể cho dữ liệu của bạn)

Điều này được gọi là xác nhận mẫu. Khi bạn nhập dữ liệu, trình duyệt và/hoặc máy chủ web sẽ kiểm tra xem dữ liệu có đúng định dạng và trong giới hạn do ứng dụng đặt ra không. Xác thực được thực hiện trong trình duyệt được gọi là xác thực phía máy khách, trong khi xác thực được thực hiện trên máy chủ được gọi là xác thực phía máy chủ. Trong chương này, chúng tôi đang tập trung vào xác thực phía máy khách

Nếu thông tin được định dạng chính xác, ứng dụng sẽ cho phép dữ liệu được gửi đến máy chủ và (thường) được lưu trong cơ sở dữ liệu;

Chúng tôi muốn làm cho việc điền vào các biểu mẫu web dễ dàng nhất có thể. Vậy tại sao chúng tôi nhấn mạnh vào việc xác nhận các hình thức của chúng tôi?

• Chúng tôi muốn có được dữ liệu phù hợp, ở định dạng phù hợp. Các ứng dụng của chúng tôi sẽ không hoạt động bình thường nếu dữ liệu của người dùng được lưu trữ ở định dạng sai, không chính xác hoặc bị bỏ sót hoàn toàn
• Chúng tôi muốn bảo vệ dữ liệu của người dùng. Buộc người dùng của chúng tôi nhập mật khẩu an toàn giúp bảo vệ thông tin tài khoản của họ dễ dàng hơn
• Chúng tôi muốn tự bảo vệ mình. Có nhiều cách mà người dùng độc hại có thể lạm dụng các hình thức không được bảo vệ để làm hỏng ứng dụng. Xem Bảo mật trang web

  Cảnh báo. Không bao giờ tin tưởng dữ liệu được chuyển đến máy chủ của bạn từ máy khách. Ngay cả khi biểu mẫu của bạn đang xác thực chính xác và ngăn đầu vào không đúng định dạng ở phía máy khách, người dùng ác ý vẫn có thể thay đổi yêu cầu mạng

Các loại xác thực phía máy khách khác nhau

Có hai loại xác thực phía máy khách khác nhau mà bạn sẽ gặp trên web

• Xác thực biểu mẫu tích hợp sử dụng các tính năng xác thực biểu mẫu HTML mà chúng ta đã thảo luận ở nhiều nơi trong mô-đun này. Việc xác thực này thường không yêu cầu nhiều JavaScript. Xác thực biểu mẫu tích hợp có hiệu suất tốt hơn JavaScript, nhưng nó không thể tùy chỉnh như xác thực JavaScript
• Xác thực JavaScript được mã hóa bằng JavaScript. Xác thực này hoàn toàn có thể tùy chỉnh, nhưng bạn cần tạo tất cả (hoặc sử dụng thư viện)

Sử dụng xác thực biểu mẫu tích hợp

Một trong những tính năng quan trọng nhất của điều khiển biểu mẫu hiện đại là khả năng xác thực hầu hết dữ liệu người dùng mà không cần dựa vào JavaScript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác thực trên các phần tử biểu mẫu. Chúng tôi đã thấy nhiều trong số này sớm hơn trong khóa học, nhưng để tóm tắt lại

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  8. Chỉ định xem một trường biểu mẫu có cần được điền vào trước khi biểu mẫu có thể được gửi hay không

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  0. Chỉ định độ dài tối thiểu và tối đa của dữ liệu văn bản (chuỗi)

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  1 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  2. Chỉ định giá trị tối thiểu và tối đa của các loại đầu vào số

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  3. Chỉ định xem dữ liệu cần phải là số, địa chỉ email hay một số loại đặt trước cụ thể khác

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  4. Chỉ định một biểu thức chính quy xác định một mẫu mà dữ liệu đã nhập cần tuân theo

Nếu dữ liệu được nhập vào trường biểu mẫu tuân theo tất cả các quy tắc được chỉ định bởi các thuộc tính trên, nó được coi là hợp lệ. Nếu không, nó được coi là không hợp lệ

Khi một phần tử hợp lệ, những điều sau đây là đúng

• Phần tử khớp với lớp giả CSS

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  5, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử hợp lệ
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ gửi biểu mẫu, miễn là không có gì khác ngăn cản việc đó (e. g. , JavaScript)

Khi một phần tử không hợp lệ, những điều sau đây là đúng

• Phần tử khớp với lớp giả CSS

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  6 và đôi khi là các lớp giả giao diện người dùng khác (e. g. ,

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  7) tùy thuộc vào lỗi, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử không hợp lệ
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ chặn biểu mẫu và hiển thị thông báo lỗi

Ghi chú. Có một số lỗi sẽ khiến biểu mẫu không được gửi, bao gồm

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ví dụ xác thực biểu mẫu tích hợp

Trong phần này, chúng ta sẽ kiểm tra một số thuộc tính mà chúng ta đã thảo luận ở trên

Tập tin bắt đầu đơn giản

Hãy bắt đầu với một ví dụ đơn giản. một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Để bắt đầu, hãy tạo một bản sao của

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

thuộc tính bắt buộc

Tính năng xác thực HTML đơn giản nhất là thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Thêm thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Lưu ý CSS được bao gồm trong tệp ví dụ

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

CSS này làm cho đầu vào có đường viền nét đứt màu đỏ khi không hợp lệ và đường viền màu đen liền tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng xác thực trái cây. html. Xem thêm mã nguồn

Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được đặt tiêu điểm, thông báo lỗi mặc định ("Vui lòng điền vào trường này") xuất hiện và biểu mẫu không được gửi đi

Sự hiện diện của thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Ghi chú. Để có trải nghiệm người dùng tốt, hãy cho người dùng biết khi các trường biểu mẫu được yêu cầu. Đó không chỉ là trải nghiệm người dùng tốt mà còn được yêu cầu bởi nguyên tắc trợ năng của WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần. Ví dụ, tại sao bạn thực sự cần biết giới tính hoặc chức danh của ai đó?

Xác thực đối với một biểu thức chính quy

Một tính năng xác thực hữu ích khác là thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Regexps khá phức tạp và chúng tôi không có ý định dạy bạn chúng một cách thấu đáo trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn ý tưởng cơ bản về cách chúng hoạt động

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 — So khớp với một ký tự là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 (không phải

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4, không phải

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  5, v.v.)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 — Trận đấu với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, tiếp theo là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4, tiếp theo là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  60 — Khớp với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, tùy chọn theo sau là một

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4 duy nhất, theo sau là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9. (

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  64 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6)

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  66 — Khớp với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, tùy ý theo sau bởi bất kỳ số lượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4 nào, theo sau là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9. (

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  64,

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6,

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  82, v.v.)

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  83 — So khớp với một ký tự là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  86 — Khớp chính xác với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 hoặc chính xác với

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  88 (nhưng không khớp với

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  89 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 hoặc

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  71, v.v.)

Còn nhiều khả năng nữa mà chúng tôi không đề cập ở đây. Để có danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu Biểu thức chính quy của chúng tôi

Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Điều này cung cấp cho chúng tôi bản cập nhật sau — hãy dùng thử

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng fruit-pattern. html (xem thêm mã nguồn. )

Trong ví dụ này, phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Tại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Nếu một giá trị không trống của

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Ghi chú. Một số loại phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Ghi chú. Phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Hạn chế độ dài của các mục nhập của bạn

Bạn có thể giới hạn độ dài ký tự của tất cả các trường văn bản được tạo bởi

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Trình duyệt thường không cho phép người dùng nhập giá trị dài hơn dự kiến ​​vào trường văn bản. Trải nghiệm người dùng tốt hơn so với việc chỉ sử dụng

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Hạn chế các giá trị của các mục nhập của bạn

Đối với các trường số (i. e.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Hãy xem một ví dụ khác. Tạo một bản sao mới của fruit-start. tệp html

Bây giờ hãy xóa nội dung của phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

• Tại đây, bạn sẽ thấy rằng chúng tôi đã cung cấp cho trường

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  06 một

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  0 của sáu, có cùng độ dài với chuối và anh đào
• Chúng tôi cũng đã cung cấp cho trường

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  09 một

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  1 của một và một

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  2 của mười. Các số đã nhập nằm ngoài phạm vi này sẽ hiển thị là không hợp lệ; . Nếu người dùng nhập thủ công một số ngoài phạm vi này, dữ liệu không hợp lệ. Số này không bắt buộc, vì vậy việc xóa giá trị sẽ vẫn dẫn đến một giá trị hợp lệ

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Đây là ví dụ đang chạy trực tiếp

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng fruit-length. html. Xem thêm mã nguồn

Ghi chú.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

ví dụ đầy đủ

Dưới đây là một ví dụ đầy đủ để hiển thị việc sử dụng các tính năng xác thực tích hợp sẵn của HTML. Đầu tiên, một số HTML

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Và bây giờ là một số CSS để tạo kiểu cho HTML

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Điều này ám chỉ như sau

Xem Các thuộc tính liên quan đến xác thực để biết danh sách đầy đủ các thuộc tính có thể được sử dụng để hạn chế các giá trị đầu vào và các loại đầu vào hỗ trợ chúng

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng ví dụ đầy đủ. html (xem thêm mã nguồn. )

Xác thực biểu mẫu bằng JavaScript

Bạn phải sử dụng JavaScript nếu muốn kiểm soát giao diện của các thông báo lỗi gốc. Trong phần này, chúng ta sẽ xem xét các cách khác nhau để thực hiện việc này

API xác thực ràng buộc

API xác thực ràng buộc bao gồm một tập hợp các phương thức và thuộc tính có sẵn trên các giao diện DOM phần tử biểu mẫu sau

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  18 (đại diện cho phần tử

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  20)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  20 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  21)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  22 (đại diện cho một phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  28)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  24 (đại diện cho một phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  25)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  26 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  27)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  28 (đại diện cho phần tử

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  82)

API Xác thực ràng buộc cung cấp các thuộc tính sau cho các phần tử trên

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  30. Trả về một thông báo được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không đáp ứng (nếu có). Nếu điều khiển không phải là ứng cử viên để xác thực ràng buộc (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  31 là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  32) hoặc giá trị của phần tử thỏa mãn các ràng buộc của nó (là hợp lệ), điều này sẽ trả về một chuỗi trống

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  33. Trả về một đối tượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  34 có chứa một số thuộc tính mô tả trạng thái hợp lệ của phần tử. Bạn có thể tìm thấy đầy đủ chi tiết về tất cả các thuộc tính có sẵn trong trang tham khảo

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  34;

  • <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    9. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị không khớp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    4 đã chỉ định và

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu nó khớp. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    23. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị dài hơn độ dài tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    0 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu giá trị đó ngắn hơn hoặc bằng độ dài tối đa. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    24. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị ngắn hơn độ dài tối thiểu được chỉ định bởi thuộc tính

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    9 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu nó lớn hơn hoặc bằng độ dài tối thiểu. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị lớn hơn giá trị tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    2 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu giá trị đó nhỏ hơn hoặc bằng giá trị tối đa. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 và

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    7

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    21. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị nhỏ hơn giá trị tối thiểu được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    1 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu giá trị đó lớn hơn hoặc bằng giá trị tối thiểu. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 và

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    7

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu giá trị không nằm trong cú pháp được yêu cầu (khi

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    3 là

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    80 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    67) hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu cú ​​pháp đúng. Nếu

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    71. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu phần tử đáp ứng tất cả các ràng buộc xác thực của nó và do đó được coi là hợp lệ hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 nếu nó không đáp ứng bất kỳ ràng buộc nào. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    5;

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    26. Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    37 nếu phần tử có thuộc tính

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    8 nhưng không có giá trị hoặc ngược lại là

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32. Nếu đúng, phần tử khớp với lớp giả CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  31. Trả về

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  37 nếu phần tử sẽ được xác thực khi biểu mẫu được gửi;

API Xác thực ràng buộc cũng cung cấp các phương thức sau cho các phần tử trên và phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  85. Trả về

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  37 nếu giá trị của phần tử không có vấn đề về tính hợp lệ; . Nếu phần tử không hợp lệ, phương thức này cũng kích hoạt sự kiện

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  88 trên phần tử

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  89. Báo cáo (các) trường không hợp lệ bằng các sự kiện. Phương pháp này hữu ích khi kết hợp với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  90 trong trình xử lý sự kiện

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  91

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  92. Thêm thông báo lỗi tùy chỉnh vào phần tử; . Điều này cho phép bạn sử dụng mã JavaScript để thiết lập lỗi xác thực khác với các lỗi được cung cấp bởi các ràng buộc xác thực HTML tiêu chuẩn. Thông báo được hiển thị cho người dùng khi báo cáo sự cố

Triển khai thông báo lỗi tùy chỉnh

Như bạn đã thấy trong các ví dụ về ràng buộc xác thực HTML trước đó, mỗi khi người dùng cố gắng gửi biểu mẫu không hợp lệ, trình duyệt sẽ hiển thị thông báo lỗi. Cách thông báo này được hiển thị tùy thuộc vào trình duyệt

Những tin nhắn tự động này có hai nhược điểm

• Không có cách tiêu chuẩn nào để thay đổi giao diện của chúng bằng CSS
• Chúng phụ thuộc vào ngôn ngữ của trình duyệt, có nghĩa là bạn có thể có một trang bằng một ngôn ngữ nhưng thông báo lỗi được hiển thị bằng ngôn ngữ khác, như được thấy trong ảnh chụp màn hình Firefox sau

Tùy chỉnh các thông báo lỗi này là một trong những trường hợp sử dụng phổ biến nhất của API Xác thực ràng buộc. Hãy làm việc thông qua một ví dụ đơn giản về cách làm điều này

Chúng ta sẽ bắt đầu với một số mã HTML đơn giản (vui lòng đặt mã này vào tệp HTML trống; sử dụng bản sao mới của fruit-start. html làm cơ sở, nếu bạn thích)

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Và thêm đoạn JavaScript sau vào trang

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ở đây, chúng tôi lưu trữ một tham chiếu đến đầu vào email, sau đó thêm một trình lắng nghe sự kiện để chạy mã được chứa mỗi khi giá trị bên trong đầu vào được thay đổi

Bên trong mã được chứa, chúng tôi kiểm tra xem thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Nếu thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bạn có thể thử nó dưới đây

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng thông báo lỗi tùy chỉnh. html (xem thêm mã nguồn. )

Một ví dụ chi tiết hơn

Bây giờ chúng ta đã thấy một ví dụ thực sự đơn giản, hãy xem cách chúng ta có thể sử dụng API này để xây dựng một số xác thực tùy chỉnh phức tạp hơn một chút

Đầu tiên, HTML. Một lần nữa, hãy thoải mái xây dựng cái này cùng với chúng tôi

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Biểu mẫu đơn giản này sử dụng thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Đầu vào của chúng tôi để xác thực là một

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Chúng tôi đang cố gắng hiển thị các thông báo lỗi bên trong phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Ghi chú. Một điểm quan trọng ở đây là việc đặt thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bây giờ, hãy chuyển sang một số CSS cơ bản để cải thiện một chút giao diện của biểu mẫu và cung cấp một số phản hồi trực quan khi dữ liệu đầu vào không hợp lệ

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bây giờ, hãy xem JavaScript triển khai xác thực lỗi tùy chỉnh

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Các ý kiến ​​​​giải thích mọi thứ khá tốt, nhưng ngắn gọn

• Mỗi khi chúng tôi thay đổi giá trị của đầu vào, chúng tôi sẽ kiểm tra xem nó có chứa dữ liệu hợp lệ không. Nếu có thì chúng tôi sẽ xóa mọi thông báo lỗi đang hiển thị. Nếu dữ liệu không hợp lệ, chúng tôi chạy

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  08 để hiển thị lỗi thích hợp
• Mỗi khi chúng tôi cố gắng gửi biểu mẫu, chúng tôi lại kiểm tra xem dữ liệu có hợp lệ không. Nếu vậy, chúng tôi để biểu mẫu gửi. Nếu không, chúng tôi chạy

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  08 để hiển thị lỗi thích hợp và dừng gửi biểu mẫu với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  90
• Hàm

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  08 sử dụng các thuộc tính khác nhau của đối tượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  33 của đầu vào để xác định lỗi là gì, sau đó hiển thị thông báo lỗi khi thích hợp

Đây là kết quả trực tiếp

Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng xác thực tùy chỉnh chi tiết. html. Xem thêm mã nguồn

API xác thực ràng buộc cung cấp cho bạn một công cụ mạnh mẽ để xử lý xác thực biểu mẫu, cho phép bạn có quyền kiểm soát rất lớn đối với giao diện người dùng ở trên và ngoài những gì bạn có thể làm chỉ với HTML và CSS

Xác thực các biểu mẫu không có API tích hợp

Trong một số trường hợp, chẳng hạn như điều khiển tùy chỉnh, bạn sẽ không thể hoặc không muốn sử dụng API xác thực ràng buộc. Bạn vẫn có thể sử dụng JavaScript để xác thực biểu mẫu của mình, nhưng bạn sẽ phải viết biểu mẫu của riêng mình

Để xác thực một biểu mẫu, hãy tự hỏi mình một số câu hỏi

Bạn cần xác định cách xác thực dữ liệu của mình. thao tác chuỗi, chuyển đổi kiểu, biểu thức chính quy, v.v. Tuỳ bạn

Đây rõ ràng là một vấn đề giao diện người dùng. Bạn phải quyết định biểu mẫu sẽ hoạt động như thế nào. Biểu mẫu có gửi dữ liệu không?

Để giảm bớt sự thất vọng của người dùng, điều rất quan trọng là cung cấp càng nhiều thông tin hữu ích càng tốt để hướng dẫn họ sửa lỗi đầu vào của mình. Bạn nên đưa ra các đề xuất trước để họ biết những gì được mong đợi, cũng như các thông báo lỗi rõ ràng. Nếu bạn muốn tìm hiểu các yêu cầu về giao diện người dùng xác thực biểu mẫu, đây là một số bài viết hữu ích bạn nên đọc

• Giúp người dùng nhập đúng dữ liệu vào biểu mẫu
• Xác thực đầu vào
• Cách báo cáo lỗi trong biểu mẫu. 10 nguyên tắc thiết kế

Một ví dụ không sử dụng API xác thực ràng buộc

Để minh họa điều này, sau đây là phiên bản đơn giản hóa của ví dụ trước mà không có API xác thực ràng buộc

HTML gần như giống nhau;

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Tương tự, CSS không cần phải thay đổi nhiều;

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Những thay đổi lớn nằm trong mã JavaScript, mã này cần thực hiện nhiều công việc nặng nhọc hơn

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Kết quả trông như thế này

Như bạn có thể thấy, không khó để tự xây dựng một hệ thống xác thực. Phần khó khăn là làm cho nó đủ chung chung để sử dụng cả đa nền tảng và trên bất kỳ hình thức nào bạn có thể tạo. Có nhiều thư viện có sẵn để thực hiện xác thực biểu mẫu, chẳng hạn như Xác thực. js

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Xác thực biểu mẫu

Tóm lược

Xác thực biểu mẫu phía máy khách đôi khi yêu cầu JavaScript nếu bạn muốn tùy chỉnh kiểu dáng và thông báo lỗi, nhưng nó luôn yêu cầu bạn phải suy nghĩ cẩn thận về người dùng. Luôn nhớ giúp người dùng của bạn sửa dữ liệu họ cung cấp. Để đạt được điều đó, hãy đảm bảo

• Hiển thị thông báo lỗi rõ ràng
• Được cho phép về định dạng đầu vào
• Chỉ ra chính xác nơi xảy ra lỗi, đặc biệt là trên các biểu mẫu lớn

Khi bạn đã kiểm tra rằng biểu mẫu đã được điền chính xác, biểu mẫu có thể được gửi. Chúng tôi sẽ đề cập đến việc gửi dữ liệu biểu mẫu tiếp theo

Chúng tôi có thể xác thực biểu mẫu bằng JavaScript không?

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