Trình duyệt có các tính năng tích hợp sẵn để 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 việc 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 lặp đi lặp lại nhiều lần nhập lại thông tin vào biểu mẫu. Bạn có thể làm gì để giúp người dùng nhập dữ liệu hợp lệ?
Thật phiền toái 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 hạn chế 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ỉ thấy rằng tên người dùng phải có ít nhất tám ký tự.
Bạn có thể giúp người dùng bằng cách xác định các quy tắc xác thực và truyền đạt chúng.
Giúp người dùng không 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 chính xác và các hạn chế 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 những trường bắt buộc.
Hãy cố gắng 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ới <input> cho bạn biết đây là trường bắt buộc không?
Điều này xảy ra 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 mình có thể sử dụng nhiều kiểu khác, ví dụ: type="email".
Hãy cùng tìm hiểu một email bắt buộc <input>.
Hãy cố gắng 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 có thể như vậy? 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 được hiển thị trong ví dụ chỉ hợp lệ nếu trường này không trống và nếu dữ liệu đã 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 đặt một trường bắt buộc. Bạn sẽ hướng dẫn trình duyệt yêu cầu người dùng nhập ít nhất 8 ký tự cho một 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 gửi được biểu mẫu nếu nhập ít hơn 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 này là minlength.
Thiết lập 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 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 rõ các quy tắc xác thực của bạn.
Để làm được điều này, hãy kết nối phần điều khiển 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 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.
Thuộc tính 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ỉ cho phép sử dụng chữ thường; người dùng phải nhập ít nhất hai ký tự và không quá hai mươi 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
Bây giờ, bạn đã biết cách thêm quy trình xác thực trong HTML. Sẽ không tuyệt vời sao nếu bạn cũng có thể tạo kiểu cho các chế độ kiểm soát biểu mẫu dựa trên trạng thái xác thực? Bạn có thể thực hiện việc này với CSS.
Cách tạo kiểu cho một 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 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ả lập 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ì xảy ra nếu dữ liệu do người dùng nhập không hợp lệ không? Thông báo lỗi được đính kèm vào bảng điều khiển biểu mẫu sẽ xuất hiện. Điều chỉnh giao diện của phần tử khi điều này xảy ra chẳng phải rất tốt sao?
Bạn có thể sử dụng lớp giả :invalid
để thêm kiểu vào kiểm soát biểu mẫu không hợp lệ.
Ngoài ra, còn có lớp giả :valid để tạo kiểu cho các phần tử 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 xác thực. Trong mô-đun về CSS, bạn sẽ tìm hiểu thêm về tạo kiểu cho biểu mẫu.
Xác thực bằng JavaScript
Để tăng cường hơn nữa việc xác thực biểu mẫu, bạn có thể sử dụng API xác thực điều kiện ràng buộc JavaScript.
Cung cấp thông báo lỗi có ý nghĩa
Như bạn đã biết, thông báo lỗi không giống nhau trong 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 báo cho mọi người?
Để đạt được điều này, hãy sử dụng
setCustomValidity()
của Constraint Validation API (API Xác thực ràng buộc).
Hãy xem cách 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.
Đến đây, bạn đã thiết lập thông báo với setCustomValidity().
Ví dụ này cho thấy thông báo Please enter your name. nếu giá trị nhập vào không hợp lệ.
Mở bản minh hoạ trong nhiều trình duyệt 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 sẽ thấy lại các thông báo lỗi mặc định.
Bạn có thể làm được nhiều việc hơn nữa với Constraint Validation API (API Xác thực ràng buộc). Bạn sẽ tìm hiểu chi tiết bằng 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 bộ điều khiển biểu mẫu,
và xác thực mục nhập đó ngay lập tức khi người dùng rời khỏi một trường trên biểu mẫu.
Nhấp vào trường biểu mẫu trong bản minh hoạ
nhập "web" rồi nhấp vào một vị trí khác trên trang.
Bạn 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 kiến thức
Kiểm tra kiến thức của bạn về việc xác thực biểu mẫu
Bạn sử dụng thuộc tính nào để bắt buộc sử dụng các thành phần điều khiển 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: