Trong hướng dẫn này, chúng ta sẽ khám phá thuộc tính pattern của HTML, sử dụng nó để giúp chúng ta tùy biến cách chúng ta kiểm tra tính hợp lệ của form.
Tóm Tắt
Kiểm tra tính hợp lệ
Kiểm tra tính hợp lệ của Form có tầm quan trọng đối với một trang web bảo mật cũng như tính khả dụng của nó. Quá trình xác nhận đánh giá các giá trị đầu vào có đúng định dạng hay không trước khi gửi nó. Ví dụ, nếu chúng ta có một trường nhập liệu cho một địa chỉ email, thì giá trị chắc chắn phải có một địa chỉ email hợp lệ; nó nên bắt đầu bằng một ký tự hoặc một số, tiếp theo là biểu tượng @, sau đó kết thúc với một tên miền.
Đặc tả HTML5 làm cho việc xác nhận trở nên dễ dàng hơn với sự ra đời của các kiểu trường nhập liệu mới chẳng hạn như email, url, và tel, và chúng cũng đi kèm với quy tắt kiểm tra được định nghĩa trước. Bất cứ khi nào giá trị cho trước không đáp ứng với các định dạng bắt buộc, thì các trường nhập liệu này sẽ đưa ra một thông báo lỗi, từ đó ngăn chặn việc gởi dữ liệu đi.
Thông báo lỗi trong địa chỉ email không hợp lệ (Chrome)
Tuy nhiên, kỳ vọng mỗi trường hợp đầu vào đều được cung cấp khả năng kiểm tra là không thực tế. Nếu bạn có một tên người dùng, mã zip hoặc bất kỳ loại dữ liệu đặc biệt không được chỉ định như là kiểu đầu vào tiêu chuẩn thì sao? Làm thế nào chúng ta xác nhận đầu vào chúng? Đây là nơi mà thuộc tính pattern phát huy tác dụng.
Sử dụng thuộc tính Pattern
Thuộc tính pattern này chỉ áp dụng trên các phần tử input. Nó cho phép chúng ta xác định quy tắc kiểm tra giá trị đầu vào riêng của chúng ta bằng cách sử dụng Regular Expressions (RegEx). Một lần nữa, nếu giá trị không khớp với mẫu đã chỉ định, thì phần tử input sẽ đưa ra một lỗi.
Ví dụ, giả sử chúng ta có một input tên người dùng trong form của chúng ta. Không có một loại tiêu chuẩn cho tên người dùng, do đó chúng ta sử dụng text input thông thường:
Hãy định nghĩa một quy tắc để sử dụng với thuộc tính pattern. Trong trường hợp này, chúng ta sẽ chỉ ra rằng tên người dùng chỉ nên bao gồm chữ thường; chữ hoa, số hoặc ký tự đặc biệt khác đều được phép. Ngoài ra, chiều dài tên người dùng không nên có nhiều hơn 15 ký tự. Trong RegEx, quy tắc này có thể được biểu diễn như sau [a-z]{1,15}.
Thêm [a-z]{1,15} như là giá trị của thuộc tính pattern trong input tên người dùng của chúng ta:
Bây giờ, vì nó chỉ chấp nhận chữ thường, nên khi submit bất kỳ giá trị nào khác sẽ đưa một thông báo lỗi:
Thông báo lỗi, phát biểu rằng giá trị nhập vào không trùng với mẫu.Như bạn thấy ở trên, thông tin lỗi nói ” Please match the requested format. ” Xác nhận của tất cả chúng ta hoạt động giải trí, nhưng thông tin này không giúp người dùng của tất cả chúng ta hiểu được mẫu được nhu yếu thực sự là gì. UX thất bại .
Tùy biến thông báo xác nhận
May mắn thay, chúng ta có thể tùy biến thông báo để cho nó trở nên hữu ích hơn, và chúng ta có một vài cách để làm như vậy. Cách dễ nhất là chỉ định một thuộc tính title bên trong phần tử input của chúng ta:
Bây giờ title được thêm vào trong cùng với thông tin mặc định :
Tuy nhiên, thông tin bật lên là không như nhau. Nếu tất cả chúng ta so sánh nó với một trong những thông tin bởi kiểu input email được hiển thị trước đó, thì những hướng dẫn thật sự hoàn toàn có thể điển hình nổi bật hơn .
Cách thứ hai sẽ giải quyết vấn đề này cho chúng ta.
Thay thế thông báo xác nhận mặc định
Bây giờ hãy thay thế sửa chữa thông tin ” Please match the requested format ” mặc định bằng một thông tin trọn vẹn tùy biến. Chúng ta sẽ sử dụng một chút ít JavaScript để làm điều này .
Bắt đầu bằng cách thêm một id vào phần tử input, để có thể chọn nó được thuận tiện hơn.
Bây giờ, chúng ta có thể chọn phần tử input bằng cách sử dụng JavaScript và gán nó cho một biến (hoặc giữa các thẻ
Source: https://final-blade.com
Category: Kiến thức Internet
