Quick Tip: Easy form validation with HTML5

Khi bạn thu thập thông tin từ mọi người thông qua một hình thức, phải áp dụng một số loại xác nhận. Không làm như vậy có thể dẫn đến mất khách hàng, dữ liệu rác trong cơ sở dữ liệu của bạn hoặc thậm chí là khai thác an ninh của trang web của bạn. Về mặt lịch sử, việc xây dựng xác nhận là một nỗi đau ở phía máy chủ, điều này được thực hiện dễ dàng hơn bởi các khung ngăn xếp đầy đủ xử lý nó cho bạn, nhưng trên máy khách, bạn thường kết thúc bằng các thư viện JavaScript mà thực hiện rất nhiều nỗ lực để tích hợp. Rất may, HTML5 cung cấp cho chúng ta một số tính năng có thể xử lý hầu hết các nhu cầu xác nhận của bạn. Các hình thức trong HTML5 giờ đây có hỗ trợ xác thực thông qua việc sử dụng các thuộc tính đặc biệt và các kiểu nhập liệu mới và cho phép bạn kiểm soát nhiều kiểu dáng với CSS.

1. Specialized Input Types

HTML5 đã giới thiệu một số kiểu nhập liệu mới. Chúng có thể được sử dụng để tạo ra các hộp đầu vào, chỉ chấp nhận một loại dữ liệu nhất định. Các kiểu nhập liệu mới như sau:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week Để sử dụng một trong các loại mới, hãy bao gồm chúng như là giá trị của thuộc tính type:

<input type="email"/>

Nếu trình duyệt không hỗ trợ kiểu nhập liệu nhất định, trường sẽ hoạt động như một kiểu nhập văn bản thông thường. Ngoài ra, hữu ích khi biết rằng một số trường nhập (chẳng hạn như "email" và "tel") sẽ khiến thiết bị di động mở bàn phím chuyên dụng với một bộ phím hạn chế chứ không phải bố cục QUERTY đầy đủ. Để biết thêm chi tiết về tất cả các loại đầu vào, hãy đi đến wiki MDN này

2. Required Fields

Bằng cách thêm thuộc tính "bắt buộc" vào một <input>, <select> hoặc <textarea>, bạn cho trình duyệt biết rằng một giá trị phải được cung cấp trong trường này. Hãy suy nghĩ về điều này như là dấu sao màu đỏ * chúng ta thấy trong hầu hết các mẫu đăng ký.

<input type="checkbox" name="terms" required >

Vấn đề ở đây là gần như bất kỳ dữ liệu nào sẽ đáp ứng yêu cầu này - ví dụ bạn có thể bỏ qua nó bằng không gian trống (chúng tôi sẽ chỉ cho bạn cách ngăn chặn điều này trong giây lát). Khi bạn đặt thuộc tính yêu cầu trên các trường email hoặc url, trình duyệt mong đợi một mẫu nhất định được theo sau, nhưng nó rất cho phép và các email như "z @ zz" được coi là hợp lệ (đọc để xem làm thế nào để làm việc xung quanh này).

3. Limits

Chúng ta có thể thiết lập một số hạn chế cơ bản như độ dài tối đa, giá trị nhỏ nhất và lớn nhất cho các trường số. Để hạn chế chiều dài của trường nhập và vùng văn bản, sử dụng thuộc tính "maxlength". Điều này làm là cấm bất kỳ chuỗi nào dài hơn giá trị "maxlength" của trường để được nhập vào. Nếu bạn cố gắng và dán một chuỗi phù thủy vượt quá giới hạn này, biểu mẫu sẽ chỉ đơn giản là clip nó.

<input type="text" name="name" required  maxlength="15">

Các trường <input type = "number"> sử dụng các thuộc tính "max" và "min" để tạo ra một loạt các giá trị có thể - trong ví dụ của chúng tôi, chúng tôi đã cho phép độ tuổi tối thiểu cho phép là 18 (quá xấu bạn có thể ở bất kỳ độ tuổi nào bạn muốn trên internet).

<input type="number" name="age" min="18" required>

4. Styling

Các lớp giả tạo CSS3 cho phép chúng ta định dạng bất kỳ trường biểu mẫu nào tùy thuộc vào trạng thái của nó. Họ là:

• :valid
• :invalid
• :required
• :optional
• :in-range
• :out-of-range
• :read-only
• :read-write

Điều này có nghĩa là bạn có thể có các trường yêu cầu theo một cách, các tùy chọn khác và như vậy. Trong bản demo chúng ta đã kết hợp các bộ chọn "hợp lệ" và "không hợp lệ" với lớp giả "tập trung" vào các trường biểu mẫu màu đỏ hoặc xanh khi người dùng chọn chúng và bắt đầu gõ.

input:focus:invalid,
textarea:focus:invalid{
    border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}

5. Tooltips

Như bạn có thể nhận thấy, khi bạn cố gắng gửi biểu mẫu không được điền chính xác, một cửa sổ bật lên xuất hiện. Bằng cách đặt thuộc tính "title" trong các trường của chúng tôi, chúng tôi có thể thêm các gợi ý bổ sung về những giá trị mà chúng tôi mong đợi. Lưu ý rằng các trình duyệt khác nhau hiển thị cửa sổ bật lên theo cách khác. Trong Chrome, giá trị thuộc tính tiêu đề sẽ xuất hiện dưới văn bản thông báo lỗi chính bằng phông chữ nhỏ hơn. Trong Firefox, nó không hiển thị toàn bộ văn bản chú giải công cụ tùy chỉnh của bạn, trừ khi bạn đã sử dụng thuộc tính "mẫu", và sau đó được lấy làm thông tin mẫu.

<input type="text" name="name" title="Please enter your user name.">

Các hộp lỗi hoặc nội dung mặc định của chúng không thể thay đổi mà đơn giản và cần sự trợ giúp của JavaScript, nhưng đó là một hướng dẫn khác

6. Patterns

Thuộc tính "mẫu" cho phép các nhà phát triển đặt Biểu thức chính quy, trình duyệt này sẽ khớp với đầu vào do người dùng cung cấp, trước khi cho phép gửi biểu mẫu. Điều này cho phép chúng ta kiểm soát tốt các mục nhập dữ liệu, vì các mẫu RegEx có thể khá phức tạp và chính xác. Để tìm hiểu thêm về Cụm từ Thông dụng, hãy xem bài viết của chúng tôi - [Tìm hiểu Các Biểu hiện Thường xuyên trong 20 phút.](Thuộc tính "mẫu" cho phép các nhà phát triển đặt Biểu thức chính quy, trình duyệt này sẽ khớp với đầu vào do người dùng cung cấp, trước khi cho phép gửi biểu mẫu. Điều này cho phép chúng ta kiểm soát tốt các mục nhập dữ liệu, vì các mẫu RegEx có thể khá phức tạp và chính xác. Để tìm hiểu thêm về Cụm từ Thông dụng, hãy xem bài viết của chúng tôi - https://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes) Bây giờ, với khả năng lọc ra các giá trị đầu vào, mẫu đơn của chúng tôi chỉ chấp nhận các địa chỉ email đầy đủ và mật khẩu có độ dài tối thiểu là 8 ký tự, bao gồm ít nhất một số.

Đây là cách sử dụng nó:

<input type="email" name="email" required pattern="^S+@S+.S+$" title="example@mail.com">

Chúng tôi hy vọng rằng mẹo nhanh này giúp bạn đạt được tốc độ với các tính năng xác nhận của HTML5. Cảm ơn vì đã đọc!

Nguồn tham khảo: https://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5