Các trình duyệt có tích hợp các tính năng để xác thực nhằm kiểm tra xem người dùng đã nhập dữ liệu theo đúng định dạng hay chưa. Bạn có thể kích hoạt các tính năng này bằng cách sử dụng đúng phần tử và thuộc tính. Ngoài ra, bạn có thể cải thiện khả năng xác thực biểu mẫu bằng CSS và JavaScript.
Tại sao bạn nên xác thực biểu mẫu?
Trong học phần trước, bạn đã tìm hiểu cách giúp người dùng tránh phải nhập lại thông tin nhiều lần vào biểu mẫu. Làm cách nào để giúp người dùng nhập dữ liệu hợp lệ?
Bạn sẽ thấy khó chịu khi điền vào biểu mẫu mà không biết trường nào là bắt buộc hoặc giới hạn của các trường đó. Ví dụ: bạn nhập tên người dùng và gửi biểu mẫu — chỉ để phát hiện ra rằng tên người dùng phải có ít nhất 8 ký tự.
Bạn có thể giúp người dùng làm điều đó bằng cách xác định các quy tắc xác thực và trao đổi chúng.
Giúp người dùng tránh trường hợp vô tình bị thiếu các trường bắt buộc
Bạn có thể sử dụng HTML để chỉ định định dạng và quy tắc ràng buộc chính xác cho dữ liệu được nhập vào biểu mẫu của mình. Bạn cũng cần chỉ định trường bắt buộc.
Hãy thử gửi biểu mẫu này mà không nhập bất kỳ dữ liệu nào.
Bạn có thấy thông báo lỗi đính kèm vào <input> cho biết trường đó là bắt buộc không?
Điều này xảy ra là do thuộc tính required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Bạn đã biết rằng bạn có thể sử dụng nhiều kiểu khác, ví dụ như type="email".
Hãy cùng xem email bắt buộc <input>.
Hãy thử gửi biểu mẫu này mà không nhập bất kỳ dữ liệu nào. Có gì khác so với bản minh hoạ trước không? Bây giờ, hãy nhập tên của bạn vào trường email rồi thử gửi. Bạn thấy một thông báo lỗi khác. Làm thế nào điều đó có thể? Bạn nhận được một thông báo khác vì giá trị bạn đã nhập không phải là địa chỉ email hợp lệ.
Thuộc tính required cho trình duyệt biết rằng trường này là bắt buộc.
Trình duyệt cũng kiểm tra xem dữ liệu đã nhập có khớp với định dạng của type hay không.
Trường email hiển thị trong ví dụ này chỉ hợp lệ nếu không trống và nếu dữ liệu được nhập là một địa chỉ email hợp lệ.
Giúp người dùng nhập đúng định dạng
Bạn đã tìm hiểu cách thêm trường bắt buộc. Bạn sẽ hướng dẫn trình duyệt rằng người dùng phải nhập ít nhất 8 ký tự vào trường biểu mẫu như thế nào?
Hãy thử bản minh hoạ. Sau khi thay đổi, bạn sẽ không thể gửi biểu mẫu này nếu nhập dưới 8 ký tự.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Tên của thuộc tính là minlength.
Đặt giá trị thành 8 và bạn sẽ có quy tắc xác thực mong muốn.
Nếu bạn muốn ngược lại, hãy sử dụng maxlength.
Truyền đạt quy tắc xác thực
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Hãy đảm bảo tất cả người dùng đều hiểu quy tắc xác thực của bạn.
Để làm được điều này, hãy kết nối mục kiểm soát biểu mẫu với một phần tử giải thích các quy tắc.
Để thực hiện việc này, hãy thêm thuộc tính aria-describedby vào phần tử có id của biểu mẫu.
Thuộc tính mẫu
Đôi khi, bạn muốn xác định các quy tắc xác thực nâng cao hơn.
Xin nhắc lại, bạn có thể sử dụng thuộc tính HTML.
Biểu thức này được gọi là pattern và bạn có thể xác định biểu thức chính quy làm giá trị.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Ở đây, chúng tôi chỉ cho phép chữ cái viết thường; người dùng phải nhập ít nhất 2 ký tự và không quá 20 ký tự.
Bạn sẽ thay đổi pattern như thế nào để cho phép cả chữ hoa?
Hãy dùng thử.
Câu trả lời chính xác là pattern="[a-zA-Z]{2,20}".
Thêm kiểu
Giờ bạn đã biết cách thêm phương thức xác thực trong HTML. Không sao nếu bạn có thể định kiểu cho các thành phần kiểm soát biểu mẫu dựa trên trạng thái xác thực? Điều này có thể thực hiện được với CSS.
Cách tạo kiểu cho trường bắt buộc trên biểu mẫu
Cho người dùng biết rằng một trường là bắt buộc trước khi họ tương tác với biểu mẫu của bạn.
Bạn có thể tạo kiểu cho các trường required bằng lớp giả CSS :required.
input:required {
border: 2px solid;
}
Kiểu kiểm soát biểu mẫu không hợp lệ
Bạn có nhớ điều gì sẽ xảy ra nếu dữ liệu mà người dùng nhập là không hợp lệ không? Thông báo lỗi đính kèm với biểu mẫu kiểm soát sẽ xuất hiện. Việc điều chỉnh giao diện của phần tử khi điều này xảy ra có hợp lý không?
Bạn có thể sử dụng lớp giả :invalid để thêm kiểu vào các đối tượng kiểm soát biểu mẫu không hợp lệ.
Ngoài ra, còn có lớp giả lập :valid để tạo kiểu cho các thành phần biểu mẫu hợp lệ.
Có nhiều cách khác để điều chỉnh kiểu của bạn dựa trên quá trình xác thực. Trong học phần về CSS, bạn sẽ tìm hiểu thêm về các biểu mẫu tạo kiểu.
Xác thực bằng JavaScript
Để cải thiện hơn nữa khả năng xác thực biểu mẫu, bạn có thể sử dụng API xác thực quy tắc ràng buộc JavaScript.
Cung cấp thông báo lỗi có ý nghĩa
Bạn đã biết rằng trước đó, các thông báo lỗi không giống nhau trên mọi trình duyệt. Làm cách nào để bạn có thể hiển thị cùng một thông điệp cho mọi người?
Để làm được điều này, hãy sử dụng phương thức setCustomValidity() của API Xác thực quy tắc ràng buộc.
Hãy xem cách này hoạt động.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Truy vấn phần tử mà bạn muốn đặt thông báo lỗi tuỳ chỉnh.
Theo dõi sự kiện invalid của phần tử đã xác định.
Ở đó, bạn đã đặt tin nhắn với setCustomValidity().
Ví dụ này sẽ hiện thông báo Please enter your name. nếu dữ liệu nhập vào không hợp lệ.
Mở bản minh hoạ trong nhiều trình duyệt và bạn sẽ thấy cùng một thông báo ở mọi nơi. Bây giờ, hãy thử xoá JavaScript rồi thử lại. Bạn lại thấy thông báo lỗi mặc định.
Bạn còn có thể làm được nhiều việc khác với Constraint Validation API (API Xác thực quy tắc ràng buộc). Bạn sẽ tìm thấy thông tin chi tiết về cách sử dụng xác thực bằng JavaScript trong mô-đun sau này.
Cách xác thực theo thời gian thực Bạn có thể thêm tính năng xác thực theo thời gian thực trong JavaScript bằng cách theo dõi sự kiện onblur của một tuỳ chọn điều khiển biểu mẫu và xác thực dữ liệu đầu vào ngay khi người dùng rời khỏi một trường trên biểu mẫu.
Hãy nhấp vào trường biểu mẫu trong bản minh hoạ,
nhập "web" rồi nhấp vào vị trí khác trên trang.
Bạn sẽ thấy thông báo lỗi gốc cho minlength bên dưới trường biểu mẫu.
Tìm hiểu thêm về cách triển khai xác thực theo thời gian thực bằng JavaScript trong mô-đun sắp tới.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về cách xác thực biểu mẫu
Bạn sử dụng thuộc tính nào để bắt buộc các đối tượng kiểm soát biểu mẫu?
requiredneededessentialobligatoryBạn có thể xác định thông báo lỗi của riêng mình không?
message.:invalid.Bạn có thể gửi <input> có type="email" và thuộc tính required: