Mức độ sử dụng thấp của xác thực biểu mẫu HTML
- Biểu mẫu HTML có cơ chế xác thực mạnh mẽ nhưng lại không được dùng nhiều. Nhiều người không biết rõ về nó. Điều này có thể là do khiếm khuyết trong thiết kế.
Thuộc tính, phương thức và property
- Có thể thêm thuộc tính
required để ngăn nhập trống.
- Có ba cách để thêm ràng buộc cho dữ liệu nhập:
- Dùng các giá trị thuộc tính
type cụ thể: "email", "number", "url"
- Dùng các thuộc tính đầu vào khác như
"pattern" hoặc "maxlength"
- Dùng phương thức DOM
setCustomValidity: đây là cách mạnh mẽ nhất để tạo logic xác thực tùy ý và xử lý các trường hợp phức tạp.
Sự tinh vi của API mệnh lệnh
- API
setCustomValidity chỉ được cung cấp dưới dạng phương thức nên khá bất tiện khi sử dụng.
- Ví dụ, có thể triển khai chức năng tương tự thuộc tính
required để chặn gửi biểu mẫu khi ô nhập trống.
- Nếu ô nhập trống ở lần render đầu tiên, cần đặt nó ở trạng thái không hợp lệ.
Vấn đề boilerplate
- Cách xác thực giá trị ban đầu khá rườm rà.
- Logic xác thực bị lặp lại ở trình xử lý
onChange và giai đoạn render ban đầu.
- Tổ hợp
useRef + useLayoutEffect + onChange khá phức tạp.
Phần còn thiếu
- Cần có thuộc tính
custom-validity.
- Trong các framework khai báo, có thể định nghĩa xác thực đầu vào theo cách mạnh mẽ hơn.
Sức mạnh của xác thực bất đồng bộ
- Có thể xử lý trường hợp tên người dùng chỉ hợp lệ khi chưa được sử dụng.
- Việc này cần gọi bất đồng bộ tới máy chủ và cần có trạng thái trung gian.
Triển khai
- Dùng hàm
verifyUsername để kiểm tra tính duy nhất của tên người dùng.
- Dùng
useQuery để quản lý trạng thái yêu cầu tới máy chủ.
- Dùng thuộc tính
customValidity để mô tả luồng xác thực bất đồng bộ.
Biểu mẫu xác nhận mật khẩu
- Triển khai biểu mẫu yêu cầu nhập lại mật khẩu đã nhập.
- Xác thực bằng cách kiểm tra xem hai trường nhập có khớp nhau hay không.
Kết luận
setCustomValidity có thể đáp ứng nhiều nhu cầu xác thực khác nhau.- Một API mạnh mẽ mới mang lại sức mạnh thực sự.
- Hy vọng tính năng này sẽ được bổ sung vào đặc tả HTML.
Tóm tắt của GN⁺
- Xác thực biểu mẫu HTML rất mạnh nhưng chưa được tận dụng tốt. Nguyên nhân có thể là do độ phức tạp của API.
- Phương thức
setCustomValidity là một công cụ mạnh để xử lý logic xác thực phức tạp.
- Bài viết đưa ra cách xử lý các kịch bản phức tạp như xác thực bất đồng bộ.
- Đây là thông tin hữu ích giúp các nhà phát triển tận dụng tốt hơn khả năng xác thực biểu mẫu HTML.
1 bình luận
Ý kiến trên Hacker News
Trình duyệt web vẫn không cho phép thay đổi kiểu dáng của các thông báo kiểm tra tính hợp lệ HTML tích hợp sẵn, và Chrome cùng Firefox không tuân theo hướng dẫn UI của nền tảng OS nên dễ xung đột với thẩm mỹ của dự án
<select multiple>Dùng các giá trị thuộc tính
typecụ thể (ví dụ: "email", "number", "url") có thể kích hoạt bàn phím tối ưu trên di động, từ đó cải thiện đáng kể trải nghiệm người dùngNhững người viết đặc tả đang tách rời khỏi việc sử dụng thực tế; nó phù hợp với những thứ đơn giản, nhưng với các biểu mẫu phức tạp thì tự viết vẫn tốt hơn
Có người hối tiếc vì đã bỏ qua sự đơn giản cơ bản của form, và cảm ơn vì đã chia sẻ góc nhìn của người khác
Có đề nghị rằng khi checkbox có nhãn, hãy thêm thuộc tính
forvào nhãn để có thể nhấp vào nhãn nhằm bật/tắt checkboxCó cung cấp một ví dụ đơn giản không dùng React
Kiểm tra tính hợp lệ của form HTML rất tuyệt, nhưng có một vấn đề lớn là nó không hoạt động trên Firefox for Android
Nhiều framework và thư viện cung cấp tính năng kiểm tra hợp lệ có thể tùy biến kiểu dáng, nên không nhất thiết phải tự làm vất vả
Cần cẩn thận để không lạm dụng việc kiểm tra hợp lệ
Những trang dùng sai
type=passwordcho đầu vào 2FA khiến trình quản lý mật khẩu và trình duyệt bị nhầm lẫn