Giới thiệu Xác thực ràng buộc HTML5
Các trang web và ứng dụng tương tác không thể được tưởng tượng mà không có các hình thức cho phép chúng tôi kết nối với người dùng của chúng tôi, và để lấy dữ liệu chúng tôi cần để đảm bảo giao dịch suôn sẻ với họ. Chúng tôi cần đầu vào người dùng hợp lệ, tuy nhiên chúng ta cần có được nó theo cách không nản lòng người dùng của chúng tôi quá nhiều.
Mặc dù chúng tôi có thể cải thiện khả năng sử dụng các biểu mẫu của mình bằng các mẫu thiết kế UX được chọn thông minh, HTML5 cũng có một cơ chế riêng để xác thực ràng buộc cho phép chúng tôi bắt lỗi đầu vào ngay ở mặt trước.
Trong bài đăng này, chúng tôi sẽ tập trung vào xác nhận ràng buộc do trình duyệt cung cấp, và xem xét làm thế nào các nhà phát triển frontend có thể bảo mật đầu vào người dùng hợp lệ bằng HTML5.
Tại sao chúng ta cần xác thực đầu vào Front-end
Xác nhận đầu vào có hai mục tiêu chính. Nội dung chúng tôi nhận được cần phải là:
1. Hữu ích
Chúng ta cần dữ liệu có thể sử dụng chúng ta có thể làm việc với. Chúng ta cần phải làm cho mọi người đi vào dữ liệu thực tế ở định dạng đúng. Chẳng hạn, không ai còn sống ngày nay được sinh ra cách đây 200 năm. Nhận dữ liệu như thế này thoạt nghe có vẻ buồn cười, nhưng về lâu dài nó gây khó chịu và làm cho cơ sở dữ liệu của chúng tôi có dữ liệu vô dụng.
2. Bảo mật
Khi đề cập đến bảo mật, điều này có nghĩa là chúng ta cần phải ngăn chặn nội dung độc hại - dù cố tình hay vô tình.
Hữu ích (nhận dữ liệu hợp lý) có thể đạt được chỉ ở phía khách hàng, nhóm phụ trợ không thể giúp quá nhiều với điều này. Để đạt được Bảo vệ, nhà phát triển phía trước và phụ trợ cần phải làm việc cùng nhau.
Nếu các nhà phát triển lối vào xác nhận hợp lệ đầu vào ở phía máy khách, thì nhóm phụ trợ sẽ phải đối phó với các lỗ hổng ít hơn nhiều. Hacking (một trang web) thường đòi hỏi nộp thêm dữ liệu, hoặc là dữ liệu sai định dạng. Các nhà phát triển có thể chống lại các lỗ hổng bảo mật như thế này, chiến đấu thành công từ phía trước.
Ví dụ, hướng dẫn bảo mật PHP này khuyên bạn nên kiểm tra mọi thứ chúng ta có thể ở phía máy khách. Họ nhấn mạnh tầm quan trọng của xác nhận đầu vào frontend bằng cách đưa ra nhiều ví dụ, chẳng hạn như:
"Xác thực đầu vào hoạt động tốt nhất với các giá trị cực kỳ hạn chế, ví dụ: khi một thứ gì đó phải là số nguyên hoặc chuỗi ký tự chữ và số hoặc URL HTTP."
Trong xác nhận đầu vào frontend, công việc của chúng tôi là áp đặt các ràng buộc hợp lý về đầu vào của người dùng. Tính năng xác thực ràng buộc của HTML5 cung cấp cho chúng tôi các phương tiện để làm như vậy.
Xác thực ràng buộc HTML5
Trước HTML5, các nhà phát triển lối vào đã bị giới hạn ở xác thực đầu vào của người dùng bằng JavaScript, đó là một quá trình tẻ nhạt và dễ bị lỗi. Để cải thiện xác thực biểu mẫu phía máy khách, HTML5 đã giới thiệu xác nhận ràng buộc thuật toán chạy trong các trình duyệt hiện đại và kiểm tra tính hợp lệ của đầu vào đã gửi.
Để thực hiện đánh giá, thuật toán sử dụng thuộc tính liên quan đến xác nhận của các yếu tố đầu vào, nhu la ,
, và
. Nếu bạn muốn biết cách xác thực ràng buộc xảy ra từng bước trong trình duyệt, hãy xem tài liệu WhatWG này.
Nhờ tính năng xác thực ràng buộc của HTML5, chúng tôi có thể thực thi tất cả nhiệm vụ xác nhận đầu vào tiêu chuẩn về phía khách hàng không có JavaScript, chỉ với HTML5.
Để thực hiện các tác vụ liên quan đến xác thực phức tạp hơn, HTML5 cung cấp cho chúng tôi Ràng buộc API xác thực API chúng ta có thể sử dụng để thiết lập các kịch bản xác nhận tùy chỉnh của mình.
Xác thực với các kiểu đầu vào ngữ nghĩa
HTML5 đã giới thiệu các kiểu đầu vào ngữ nghĩa rằng - ngoài việc chỉ ra ý nghĩa của thành phần cho tác nhân người dùng - còn có thể được sử dụng để xác thực đầu vào của người dùng bằng cách giới hạn người dùng ở một định dạng đầu vào nhất định.
Bên cạnh các loại đầu vào đã tồn tại trước HTML5 (bản văn
, mật khẩu
, Gửi đi
, cài lại
, radio
, hộp kiểm
, nút
, ẩn
), chúng tôi cũng có thể sử dụng như sau các kiểu đầu vào HTML5 ngữ nghĩa: e-mail
,điện thoại
,url
,con số
,thời gian
,ngày
,ngày giờ
,datetime-local
, tháng
,tuần
, phạm vi
, Tìm kiếm
,màu
.
Chúng tôi có thể sử dụng một cách an toàn các loại đầu vào HTML5 với các trình duyệt cũ hơn, vì chúng sẽ hoạt động như một trường trong các trình duyệt không hỗ trợ chúng.
Hãy xem điều gì xảy ra khi người dùng nhập sai loại đầu vào. Giả sử chúng tôi đã tạo trường nhập email với mã sau:
Khi người dùng nhập một chuỗi không sử dụng định dạng email, thuật toán xác thực ràng buộc không gửi biểu mẫu, và trả về một thông báo lỗi:
Quy tắc tương tự cũng áp dụng cho các loại đầu vào khác, ví dụ như cho gõ = "url"
Người dùng chỉ có thể gửi một đầu vào tuân theo định dạng URL (bắt đầu bằng một giao thức, chẳng hạn như http: //
hoặc là ftp: //
).
Một số loại đầu vào sử dụng một thiết kế thậm chí không cho phép người dùng nhập sai định dạng đầu vào, ví dụ màu
và phạm vi
.
Nếu chúng ta sử dụng màu
loại đầu vào người dùng bị hạn chế chọn màu từ bộ chọn màu hoặc ở với màu đen mặc định. Trường đầu vào là bị ràng buộc bởi thiết kế, do đó, nó không để lại nhiều cơ hội cho lỗi người dùng.
Khi nó phù hợp, nó đáng để xem xét sử dụng Thẻ HTML hoạt động tương tự như các loại đầu vào bị ràng buộc theo thiết kế; nó cho phép người dùng chọn từ danh sách thả xuống.
Sử dụng các thuộc tính xác thực của HTML5
Sử dụng các kiểu đầu vào ngữ nghĩa đặt ra các ràng buộc nhất định đối với những gì người dùng được phép gửi, nhưng trong nhiều trường hợp, chúng tôi muốn tiến xa hơn một chút. Đây là khi thuộc tính liên quan đến xác nhận của thẻ có thể giúp chúng tôi ra.
Các thuộc tính liên quan đến xác nhận thuộc về các loại đầu vào nhất định (chúng không thể được sử dụng trên tất cả các loại) mà trên đó họ áp đặt các ràng buộc hơn nữa.
1. cần thiết
để có được một đầu vào hợp lệ bằng mọi cách
Các cần thiết
thuộc tính là thuộc tính xác thực HTML nổi tiếng nhất. nó là một thuộc tính boolean có nghĩa là nó không nhận bất kỳ giá trị nào, chúng ta chỉ cần đặt nó bên trong nếu chúng ta muốn sử dụng nó:
Nếu người dùng quên nhập giá trị vào trường nhập bắt buộc, trình duyệt trả về một thông báo lỗi cảnh báo họ điền vào lĩnh vực này, và họ không thể gửi mẫu cho đến khi họ đã cung cấp một đầu vào hợp lệ. Đó là lý do tại sao nó luôn quan trọng đánh dấu trực quan các trường bắt buộc cho người dùng.
Các cần thiết
thuộc tính có thể là được sử dụng cùng với các loại đầu vào sau: bản văn
, Tìm kiếm
, url
, điện thoại
, e-mail
, mật khẩu
, ngày
, ngày giờ
, datetime-local
, tháng
, tuần
,thời gian
, con số
, hộp kiểm
, radio
, tập tin
, cộng với và
Thẻ HTML.
2. tối thiểu
, tối đa
và bậc thang
để xác nhận số
Các tối thiểu
, tối đa
và bậc thang
các thuộc tính cho phép chúng ta đặt các ràng buộc trên các trường nhập số. Chúng có thể được sử dụng cùng với phạm vi
, con số
, ngày
, tháng
, tuần
, ngày giờ
, datetime-local
, và thời gian
loại đầu vào.
Các tối thiểu
và tối đa
các thuộc tính cung cấp một cách tuyệt vời để dễ dàng loại trừ dữ liệu không hợp lý. Chẳng hạn, ví dụ dưới đây buộc người dùng phải gửi độ tuổi từ 18 đến 120.
Khi thuật toán xác thực ràng buộc va vào đầu vào của người dùng nhỏ hơn tối thiểu
, hoặc lớn hơn tối đa
giá trị, nó ngăn nó tiếp cận phụ trợ và trả về một thông báo lỗi.
Các bậc thang
thuộc tính chỉ định một khoảng số giữa các giá trị pháp lý của một trường đầu vào số. Chẳng hạn, nếu chúng ta muốn người dùng chỉ chọn từ những năm nhuận, chúng ta có thể thêm bước = "4"
thuộc tính cho trường. Trong ví dụ dưới đây tôi đã sử dụng con số
kiểu đầu vào, vì không có loại = "năm"
trong HTML5.
Với các ràng buộc được cài đặt sẵn, người dùng chỉ có thể chọn trong số các năm nhuận từ năm 1972 đến năm 2016 nếu họ sử dụng mũi tên lên nhỏ đi kèm với con số
kiểu đầu vào. Họ cũng có thể nhập giá trị theo cách thủ công vào trường nhập, nhưng trong trường hợp nó không đáp ứng các ràng buộc, trình duyệt sẽ trả về thông báo lỗi.
3. tối đa
để xác thực độ dài văn bản
Các tối đa
thuộc tính làm cho nó có thể đặt độ dài ký tự tối đa cho các trường nhập văn bản. Nó có thể được sử dụng cùng với bản văn
, Tìm kiếm
, url
, điện thoại
, e-mail
và mật khẩu
loại đầu vào, và với Thẻ HTML.
Các tối đa
thuộc tính có thể là một giải pháp tuyệt vời cho các trường số điện thoại không thể có nhiều hơn một số ký tự nhất định hoặc cho các hình thức liên hệ mà chúng tôi không muốn người dùng viết nhiều hơn một độ dài nhất định.
Đoạn mã dưới đây cho thấy một ví dụ cho cái sau, nó ràng buộc các thông điệp của người dùng đến 500 ký tự.
Các tối đa
thuộc tính không trả lại thông báo lỗi, nhưng trình duyệt đơn giản là không cho phép người dùng nhập nhiều hơn số ký tự được chỉ định. Đó là lý do tại sao nó rất quan trọng để thông báo cho người dùng về các ràng buộc, nếu không họ sẽ không hiểu tại sao họ không thể tiếp tục gõ.
4. mẫu
để xác nhận Regex
Các mẫu
thuộc tính cho phép chúng ta sử dụng biểu thức chính quy trong quá trình xác nhận đầu vào của chúng tôi. Một biểu thức chính quy là một bộ ký tự được xác định trước tạo thành một mô hình nhất định. Chúng ta có thể sử dụng nó để tìm kiếm các chuỗi theo mẫu hoặc để thực thi một định dạng nhất định được xác định bởi mẫu.
Với mẫu
thuộc tính chúng ta có thể thực hiện sau - buộc người dùng gửi dữ liệu đầu vào của họ ở định dạng phù hợp với biểu thức chính quy định.
Các mẫu
thuộc tính có nhiều trường hợp sử dụng, nhưng nó có thể đặc biệt hữu ích khi chúng ta muốn xác thực trường mật khẩu.
Ví dụ dưới đây yêu cầu người dùng nhập mật khẩu dài tối thiểu 8 ký tự và chứa ít nhất một chữ cái và một số (nguồn của biểu thức chính tôi đã sử dụng).
Một vài điều nữa
Trong bài viết này, chúng tôi đã xem xét cách sử dụng xác thực mẫu do trình duyệt cung cấp được cung cấp bởi thuật toán xác thực ràng buộc gốc của HTML5. Để tạo tập lệnh xác thực tùy chỉnh của chúng tôi, chúng tôi cần sử dụng API xác thực ràng buộc có thể là bước tiếp theo trong việc tinh chỉnh các kỹ năng xác thực mẫu.
Các hình thức HTML5 có thể truy cập bằng các công nghệ hỗ trợ, vì vậy chúng tôi không nhất thiết phải sử dụng aria-yêu cầu
Thuộc tính ARIA để đánh dấu các trường đầu vào cần thiết cho trình đọc màn hình. Tuy nhiên, vẫn có thể hữu ích để thêm hỗ trợ trợ năng cho các trình duyệt cũ hơn. Cũng có thể từ chối xác nhận ràng buộc bằng cách thêm xác nhận
thuộc tính boolean cho thành phần.