Kiểm tra tính hợp lệ của biểu mẫu 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ó định dạng đúng hay không trước khi gửi nó. Ví dụ, nếu chúng ta có một trường dữ 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ệ;
Đặc tả HTML5 làm cho công 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 như
17,
18, và
19, và chúng cũng đi kèm với quy tắt kiểm tra được định nghĩa trước đó. Bất kể 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 dữ 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 nào không được chỉ định như kiểu đầu vào tiêu chuẩn thì sao?
Sử dụng thuộc tính Pattern
Thuộc tính
15 này chỉ được áp dụng trên các phần tử của
22. 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 Biểu thức chính quy [RegEx]. Một lần nữa, nếu giá trị không khớp với mẫu đã định trước, thì phần tử đầu vào sẽ đưa ra một lỗi
Ví dụ, giả sử chúng ta có một tên người dùng đầu vào trong biểu mẫu của chúng ta. Không có một loại tiêu chuẩn nào cho tên người dùng, do đó chúng ta sử dụng thông tin đầu vào
23 thông thường
1______0
0
1
2
3
Please ĐỊNH NGHĨA MỘT QUY ĐỊNH ĐỂ SỬ DỤNG THUỘC TÍNH
15. Trong trường hợp này, chúng tôi sẽ chỉ ra rằng tên người dùng chỉ nên bao gồm chữ thường; . 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
25
Add
25 as as value of the property
15 in input name user of them ta
1____0
0
1
2
3
Bây giờ, vì nó chỉ chấp nhận chữ thường, nên khi gửi bất kỳ giá trị nào khác sẽ đưa ra một thông báo lỗi
Như bạn đã thấy ở trên, thông báo lỗi nói "Vui lòng khớp định dạng được yêu cầu. "Xác nhận hoạt động của họ, nhưng thông báo này không giúp người dùng của họ hiểu được mẫu được yêu cầu thực sự là gì. UX fail
Tùy chọn thông báo xác nhận thông báo
May mắn thay, chúng ta có thể tùy biến thông báo để biến 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 chỉ là xác định một thuộc tính
28 bên trong phần tử đầu vào của chúng ta
1_______0
0
5
2
7
8
9
00
01
02
03
04
05
06
3
Bây giờ tiêu đề đã đượ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 do loại email đầu vào được hiển thị trước đó, thì các sự thật chỉ 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 định
Bây giờ hãy thay thế thông báo "Vui lòng khớp định dạng được yêu cầu" 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
29 vào phần tử
22, để có thể chọn nó thuận tiện hơn
1
0
11
2
13
8
15
00
17
02
19
04
21
06
3
Bây giờ, chúng ta có thể chọn phần tử đầu vào bằng cách sử dụng JavaScript và gán nó cho một biến [hoặc giữa các thẻ
31 trên trang của chúng ta, hoặc trong một tệp JavaScript riêng, hoặc trong cửa sổ JS trên CodePen]
1
25
Cuối cùng, chúng ta chỉ định một thông báo được sử dụng khi đầu vào hiển thị trạng thái không hợp lệ của nó
_______8____127____10
29
2
31
Sự kiện
32 kế thừa một đối tượng
33 chứa một số thuộc tính, bao gồm
34 [phần tử không hợp lệ] và
35 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
36
Bây giờ, chúng ta sẽ thấy thông báo tùy biến thay thế cái mặc định
Định phong cách
Để bổ sung cho kiểu đầu vào mới và các phương thức này để thiết lập một thông báo xác nhận biến tùy chỉnh, đặc tả CSS3 mang đến một vài lớp giả hữu ích,
37 và
38. Những cái này cho phép chúng ta áp dụng tùy chọn phong cách vào trạng thái xác nhận của đầu vào, ví dụ
1_______133
0
35
2
31
8
39
00
11
02
13
04
31
Có một số thứ cần lưu ý khi sử dụng các lớp giả
- Đầu tiên,
37 được áp dụng mặc định, ngay cả khi giá trị đầu vào trống. Vì vậy, nếu bạn có thể nhìn thấy ở trên, chúng ta đặt
40
41; . Giá trị trống luôn được xem là hợp lệ, trừ khi chúng ta bổ sung thuộc tính
42. Trong trường hợp đó, đầu vào không hợp lệ và viền màu đỏ được đưa ra - Các cách cho hợp lệ và không hợp lệ được áp dụng ngay lập tức khi người dùng đang nhập, ngay cả khi giá trị trống. Change the style of the now set up to make up the Rối loạn người dùng
One from about style notification Popup
Xác nhận biểu mẫu đã trở thành một tiêu chuẩn mới sau mỗi một HTML5 mô tả cụ thể, nhưng các cửa sổ bật lên lỗi xuất hiện hoàn toàn tùy 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 tùy chọn phong cách bật lên 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ế cửa sổ bật lên thông báo bằng cách sử dụng JavaScript, vì vậy, hãy xem nó hoạt động như thế nào
Upgrade cao hơn
Chúng ta sẽ tạo một tùy chọn bật lên sẽ xuất hiện khi giá trị của đầu vào không hợp lệ. Để bắt đầu, chúng ta cần chọn một số phần tử cần thiết, cụ thể là
22 và
44
_______8____125____10
19
Tiếp theo, chúng ta sẽ tạo ra một phần tử mới sẽ chứa thông báo của chúng ta
1
1
0
3
2
5
8
7
Ở đây, chúng tôi tạo ra một phần tử
45 mới. Chúng tôi gán cho nó id là
46, và ẩn nó đi bằng cách thiết lập thuộc tính
47 thành
48. Cuối cùng, chúng ta bổ sung
45 mới vào bên trong
44
Làm việc với các sự kiện
Có hai sự kiện chúng ta cần phải xử lý. Đầu tiên, sự kiện
51 được gọi khi giá trị của đầu vào không khớp với mẫu. We will run code after here side in the event
51
1_______09
0
01
2
03
8
05
00
07
02
09
04
06
12
13
14
15
16
Ở đây, với
53; . Thay vào đó, chúng ta sẽ hiển thị thông báo riêng thông qua phần tử
45 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,
55 và hiển thị thông báo bằng cách thiết lập thuộc tính hiển thị thành
56
Chúng ta cũng thêm một lớp,
51, vào phần tử đầu vào, để 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 biểu định kiểu CSS
1______218
0____000
2
31
Ngoài ra, bạn cũng có thể thêm các lớp
58 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 rung [lắc]
Sự kiện thứ hai là sự kiện
22. Sự kiện này được gọi khi giá trị của đầu vào thay đổi. Chúng ta sẽ sử dụng sự kiện này để chuyển trạng thái của đầu vào về bình thường, cũng như ẩn thông báo bật lên, như sau
1_______004
0
06
2
08
8
10
00
14
02
16
Nếu bạn có thể thấy ở trên, chúng tôi sẽ loại bỏ tên lớp khỏi phần tử
22 và ẩn thông báo bật lên
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. Please try it. input any invalid value
Lưu ý. Đừng quên ghé qua GraphicRiver nếu bạn đang tìm cảm hứng để thiết kế giao diện form
Kết luận
Sử dụng kiểu đầu vào tiêu chuẩn giống với thuộc tính
15 sẽ cung cấp cho biểu mẫu 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 quá trình duyệt, thì trình duyệt mới nhất sẽ vẫn hiển thị cửa sổ bật lên xác nhận và ngăn chặn việc gửi biểu mẫu. Tuy nhiên, Safari, không hỗ trợ mẫu thuộc tính tại thời điểm bài viết. Tính năng tương tự có thể được thêm vào bằng cách sử dụng Webshim Lib polyfill
Tôi hy vọng bạn thích hướng dẫn này và giữ nó như một tài liệu tham khảo tiện dụng cho việc xác nhận bằng HTML5