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 Show <form action="somefile.php"> 17, 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ư <form action="somefile.php"> 18, <form action="somefile.php"> 19, và <form action="somefile.php"> 20, 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.  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 <form action="somefile.php"> 16 phát huy tác dụng. Sử dụng thuộc tính PatternThuộc tính <form action="somefile.php"> 16 này chỉ áp dụng trên các phần tử <form action="somefile.php"> 23. 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 <form action="somefile.php"> 24 input thông thường: 1 <form action="somefile.php"> 2 <input type="text" name="username" placeholder="Username"> 3 </form> Hãy định nghĩa một quy tắc để sử dụng với thuộc tính <form action="somefile.php"> 16. 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 <form action="somefile.php"> 26. Thêm <form action="somefile.php"> 26 như là giá trị của thuộc tính <form action="somefile.php"> 16 trong input tên người dùng của chúng ta: 1 <form action="somefile.php"> 2 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 3 </form> 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: Như bạn thấy ở trên, thông báo lỗi nói "Please match the requested format." Xác nhận của chúng ta hoạt động, nhưng thông báo này không giúp người dùng của chúng ta hiểu được mẫu được yêu cầu thực sự là gì. UX thất bại. Tùy biến thông báo xác nhậnMay 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 <form action="somefile.php"> 29 bên trong phần tử input của chúng ta: 1 <form action="somefile.php"> 2 <form action="somefile.php"> 5 3 <form action="somefile.php"> 7 <form action="somefile.php"> 8 <form action="somefile.php"> 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 Bây giờ title được thêm vào trong cùng với thông báo mặc định: Tuy nhiên, thông báo bật lên là không đồng nhất. Nếu chúng ta so sánh nó với một trong những thông báo bởi kiểu input email được hiển thị trước đó, thì các chỉ dẫn thật sự có thể 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 địnhBây giờ hãy thay thế thông báo "Please match the requested format" mặc định bằng một thông báo hoàn toàn tùy biến. Chúng ta sẽ sử dụng một chút JavaScript để làm điều này. Bắt đầu bằng cách thêm một <form action="somefile.php"> 30 vào phần tử <form action="somefile.php"> 23, để có thể chọn nó được thuận tiện hơn. 1 <form action="somefile.php"> 2 <input type="text" name="username" placeholder="Username"> 1 3 <input type="text" name="username" placeholder="Username"> 3 <form action="somefile.php"> 8 <input type="text" name="username" placeholder="Username"> 5 2 0 <input type="text" name="username" placeholder="Username"> 7 2 2 <input type="text" name="username" placeholder="Username"> 9 2 4 3 1 2 6 2 7 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ẻ <form action="somefile.php"> 32 trên trang của chúng ta, hoặc trong một tập tin JavaScript riêng, hoặc trong cửa sổ JS trên CodePen): 1 3 5 Cuối cùng, chúng ta chỉ định thông báo được sử dụng khi input hiển thị trạng thái không hợp lệ của nó. 1 3 7 2 3 9 3 </form> 1 Sự kiện <form action="somefile.php"> 33 kế thừa một đối tượng <form action="somefile.php"> 34 chứa một vài thuộc tính, bao gồm <form action="somefile.php"> 35 (phần tửu không hợp lệ) và <form action="somefile.php"> 36 chứa thông báo lỗi. Trong ví dụ trên, chúng ta đã thay thế thông báo bằng cách sử dụng phương thức <form action="somefile.php"> 37. Bây giờ, chúng ta sẽ thấy thông báo tuỳ biến thay thế cái mặc định. Định phong cáchĐể bổ sung cho kiểu input mới và những phương thức này để thiết lập một thông báo xác nhận tuỳ biến, đặc tả CSS3 mang đến một vài lớp giả hữu ích, <form action="somefile.php"> 38 và <form action="somefile.php"> 39. Những cái này cho phép chúng ta áp dụng phong cách tùy thuộc vào trạng thái xác nhận của input, ví dụ: 1 </form> 3 2 </form> 5 3 </form> 7 <form action="somefile.php"> 8 </form> 9 2 0 1 1 2 2 1 3 2 4 </form> 7 Có một số thứ cần lưu ý khi sử dụng các lớp giả:
Một từ về định phong cách thông báo PopupXác nhận form đã trở thành một tiêu chuẩn mới sau mỗi một đặc tả HTML5, nhưng các popup lỗi xuất hiện hoàn toàn tuỳ thuộc vào các nhà cung cấp trình duyệt thì như thế nào. Kỳ vọng cái đẹp khác nhau trong các trình duyệt khác nhau, sẽ không giúp tạo ra sự thống nhất của giao diện người dùng. Google Chrome ngăn chặn khả năng tùy biến phong cách popup mặc định cách đây một vài năm. Nếu điều này là cái mà bạn muốn đạt được, lựa chọn duy nhất còn lại là hoàn toàn có thể thay thế thông báo popup bằng cách sử dụng JavaScript, vì vậy, hãy xem nó làm việc như thế nào! Nâng cao hơnChúng ta sẽ tạo một popup tùy biến mà sẽ xuất hiện khi giá trị của input là không hợp lệ. Để bắt đầu, chúng ta cần chọn một vài phần tử cần thiết, cụ thể là <form action="somefile.php"> 23 và <form action="somefile.php"> 45: 1 3 5 2 1 9 Tiếp theo, chúng ta sẽ tạo ra một phần tử mới mà sẽ chứa thông báo của chúng ta: 1 <form action="somefile.php"> 1 2 <form action="somefile.php"> 3 3 <form action="somefile.php"> 5 <form action="somefile.php"> 8 <form action="somefile.php"> 7 Ở đây, chúng tôi tạo ra một phần tử <form action="somefile.php"> 46 mới. Chúng tôi gán cho nó một id là <form action="somefile.php"> 47, và ẩn nó bằng cách thiết lập thuộc tính <form action="somefile.php"> 48 thành <form action="somefile.php"> 49. Cuối cùng, chúng ta thêm <form action="somefile.php"> 46 mới vào bên trong <form action="somefile.php"> 45. Làm việc với các sự kiệnCó hai sự kiện chúng ta cần phải xử lý. Đầu tiên, sự kiện <form action="somefile.php"> 52 được gọi khi giá trị của input không khớp với mẫu. Chúng ta sẽ chạy code sau đây bên trong sự kiện <form action="somefile.php"> 52: 1 <form action="somefile.php"> 9 2 2 1 3 2 3 <form action="somefile.php"> 8 2 5 2 0 2 7 2 2 2 9 2 4 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 1 2 6 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 3 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 4 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 5 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 6 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 7 Ở đây, với <form action="somefile.php"> 54; chúng ta bỏ hành vi mặc định để cho thông báo popup mặc định của trình duyệt không xuất hiện. Thay vào đó, chúng ta sẽ hiển thị thông báo riêng thông qua phần tử <form action="somefile.php"> 46 mới của chúng ta. Chúng ta thêm thông báo bên trong nội dung, thêm một lớp mới, <form action="somefile.php"> 56 và hiển thị thông báo bằng cách thiết lập thuộc tính display thành <form action="somefile.php"> 57. Chúng ta cũng thêm một lớp, <form action="somefile.php"> 52, vào phần tử input, cho nó viền màu đỏ. Chúng ta cũng cần phải thiết lập quy tắc phong cách trong CSS stylesheet. 1 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 9 2 <form action="somefile.php"> 01 3 </form> 7 Ngoài ra, bạn cũng có thể thêm các lớp <form action="somefile.php"> 59 từ Animate.css. Điều này cung cấp cho nó một hiệu ứng đặc biệt bằng cách sử dụng hiệu ứng shake (lắc). Sự kiện thứ hai là sự kiện <form action="somefile.php"> 23. Sự kiện này được gọi khi giá trị của input thay đổi. Chúng ta sẽ sử dụng sự kiện này chuyển trạng thái của input về lại bình thường, cũng như ẩn popup thông báo, như sau. 1 <form action="somefile.php"> 05 2 <form action="somefile.php"> 07 3 <form action="somefile.php"> 09 <form action="somefile.php"> 8 <form action="somefile.php"> 11 2 0 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 5 2 2 <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}"> 7 Như bạn có thể thấy ở trên, chúng ta sẽ loại bỏ tên lớp khỏi phần tử <form action="somefile.php"> 23 và ẩn popup thông báo. Bây giờ chúng ta đã có một thông báo xác nhận hoàn toàn tùy biến. Hãy thử nó: nhập bất kỳ giá trị không hợp lệ: Lưu ý: Đừng quên ghé qua GraphicRiver nếu bạn đang tìm kiếm cảm hứng để thiết kế giao diện form. Kết luậnSử dụng kiểu input tiêu chuẩn cùng với thuộc tính <form action="somefile.php"> 16 sẽ cung cấp cho form của bạn một lớp xác nhận, nhưng lưu ý rằng bạn nên thực hiện một số kiểu xác nhận trên máy chủ. Ngạc nhiên là, ngay cả khi người dùng đã vô hiệu hóa JavaScript trong trình duyệt, thì trình duyệt mới nhất sẽ vẫn hiển thị popup xác nhận và ngăn chặn việc submit form. Tuy nhiên, Safari, không hỗ trợ thuộc tính pattern tại thời điểm viết bài. Tính năng tương tự có thể được chèn vào bằng cách sử dụng một polyfill Webshim Lib. Tôi hy vọng bạn thích hướng dẫn này và giữ nó như là một tài liệu tham khảo tiện dụng cho việc xác nhận bằng HTML5. |
