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 , </code>, và <code><select></code>. 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.</p> <p>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ả <strong>nhiệm vụ xác nhận đầu vào tiêu chuẩn</strong> về phía khách hàng <strong>không có JavaScript, chỉ với HTML5</strong>.</p> <p>Để 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 <strong>Ràng buộc API xác thực API</strong> 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.</p> <h4>Xác thực với các kiểu đầu vào ngữ nghĩa</h4> <p>HTML5 đã giới thiệu <strong>các kiểu đầu vào ngữ nghĩa</strong> 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 để <strong>xác thực đầu vào của người dùng</strong> bằng cách giới hạn người dùng ở một định dạng đầu vào nhất định.</p> <p>Bên cạnh các loại đầu vào đã tồn tại trước HTML5 (<code>bản văn</code>, <code>mật khẩu</code>, <code>Gửi đi</code>, <code>cài lại</code>, <code>radio</code>, <code>hộp kiểm</code>, <code>nút</code>, <code>ẩn</code>), chúng tôi cũng có thể sử dụng như sau <strong>các kiểu đầu vào HTML5 ngữ nghĩa</strong>: <code>e-mail</code>,<code>điện thoại</code>,<code>url</code>,<code>con số</code>,<code>thời gian</code>,<code>ngày</code>,<code>ngày giờ</code>,<code>datetime-local</code>, <code>tháng</code>,<code>tuần</code>, <code>phạm vi</code>, <code>Tìm kiếm</code>,<code>màu</code>.</p> <p>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 <code><input type="text"></code> trường trong các trình duyệt không hỗ trợ chúng.</p> <p>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:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Email của bạn:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>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 <strong>không gửi biểu mẫu</strong>, và <strong>trả về một thông báo lỗi</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>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 <code>gõ = "url"</code> 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ư <code>http: //</code> hoặc là <code>ftp: //</code>).</p> <p>Một số loại đầu vào sử dụng một thiết kế <strong>thậm chí không cho phép người dùng nhập sai định dạng đầu vào</strong>, ví dụ <code>màu</code> và <code>phạm vi</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Màu nền:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Nếu chúng ta sử dụng <code>màu</code> 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à <strong>bị ràng buộc bởi thiết kế</strong>, do đó, nó không để lại nhiều cơ hội cho lỗi người dùng.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Khi nó phù hợp, nó đáng để xem xét sử dụng <code><select></code> 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.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Trái cây yêu thích của bạn:</label> <select name="fruit"> <option value="apple">táo</option> <option value="pear">Lê</option> <option value="orange">trái cam</option> <option value="raspberry">Dâu rừng</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Sử dụng các thuộc tính xác thực của HTML5</h4> <p>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 <strong>thuộc tính liên quan đến xác nhận</strong> của <code><input></code> thẻ có thể giúp chúng tôi ra.</p> <p>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 <em>tất cả các</em> loại) mà trên đó họ áp đặt các ràng buộc hơn nữa.</p> <h5>1. <code>cần thiết</code> để có được một đầu vào hợp lệ bằng mọi cách</h5> <p>Các <code>cần thiết</code> thuộc tính là thuộc tính xác thực HTML nổi tiếng nhất. nó là một <strong>thuộc tính boolean</strong> có nghĩa là nó <strong>không nhận bất kỳ giá trị nào</strong>, chúng ta chỉ cần đặt nó bên trong <code><input></code> nếu chúng ta muốn sử dụng nó:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>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 <strong>trả về một thông báo lỗi</strong> cảnh báo họ điền vào lĩnh vực này, và họ <strong>không thể gửi mẫu</strong> 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 <strong>đánh dấu trực quan</strong> các trường bắt buộc cho người dùng.</p> <p>Các <code>cần thiết</code> thuộc tính có thể là <strong>được sử dụng cùng với các loại đầu vào sau</strong>: <code>bản văn</code>, <code>Tìm kiếm</code>, <code>url</code>, <code>điện thoại</code>, <code>e-mail</code>, <code>mật khẩu</code>, <code>ngày</code>, <code>ngày giờ</code>, <code>datetime-local</code>, <code>tháng</code>, <code>tuần</code>,<code>thời gian</code>, <code>con số</code>, <code>hộp kiểm</code>, <code>radio</code>, <code>tập tin</code>, cộng với <code><textarea></code>và <code><select></code> Thẻ HTML.</p> <h5>2. <code>tối thiểu</code>, <code>tối đa</code> và <code>bậc thang</code> để xác nhận số</h5> <p>Các <code>tối thiểu</code>, <code>tối đa</code> và <code>bậc thang</code> các thuộc tính cho phép chúng ta <strong>đặt các ràng buộc trên các trường nhập số</strong>. Chúng có thể được sử dụng cùng với <code>phạm vi</code>, <code>con số</code>, <code>ngày</code>, <code>tháng</code>, <code>tuần</code>, <code>ngày giờ</code>, <code>datetime-local</code>, và <code>thời gian</code> loại đầu vào.</p> <p>Các <code>tối thiểu</code> và <code>tối đa</code> các thuộc tính cung cấp một cách tuyệt vời để dễ dàng <strong>loại trừ dữ liệu không hợp lý</strong>. 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.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tuổi của bạn:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>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 <code>tối thiểu</code>, hoặc lớn hơn <code>tối đa</code> giá trị, nó ngăn nó tiếp cận phụ trợ và trả về một thông báo lỗi.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Các <code>bậc thang</code> thuộc tính <strong>chỉ định một khoảng số</strong> 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 <code>bước = "4"</code> thuộc tính cho trường. Trong ví dụ dưới đây tôi đã sử dụng <code>con số</code> kiểu đầu vào, vì không có <code>loại = "năm"</code> trong HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Năm nhuận yêu thích của bạn:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>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 <code>con số</code> 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.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>tối đa</code> để xác thực độ dài văn bản</h5> <p>Các <code>tối đa</code> thuộc tính làm cho nó có thể <strong>đặt độ dài ký tự tối đa</strong> cho các trường nhập văn bản. Nó có thể được sử dụng cùng với <code>bản văn</code>, <code>Tìm kiếm</code>, <code>url</code>, <code>điện thoại</code>, <code>e-mail</code> và <code>mật khẩu</code> loại đầu vào, và với <code><textarea></code> Thẻ HTML.</p> <p>Các <code>tối đa</code> 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.</p> <p>Đ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ự. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Tin nhắn (tối đa 500 ký tự):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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õ.

 
 * Mật khẩu của bạn: