Xác thực mẫu bootstrap
|
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ệ; Show Đặ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ư 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 PatternThuộc tính 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 1______0 Please ĐỊNH NGHĨA MỘT QUY ĐỊNH ĐỂ SỬ DỤNG THUỘC TÍNH Add 1____0 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áoMay 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 1_______0 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 địnhBâ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 1 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ẻ 1 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 Sự kiện 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, 1_______133 11 13 Có một số thứ cần lưu ý khi sử dụng các lớp giả
One from about style notification PopupXá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ơnChú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à _______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 Ở đây, chúng tôi tạo ra một phần tử 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 1_______09 Ở đây, với Chúng ta cũng thêm một lớp, 1______218 Ngoài ra, bạn cũng có thể thêm các lớp Sự kiện thứ hai là sự kiện 1_______004 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ử 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ậnSử dụng kiểu đầu vào tiêu chuẩn giống với thuộc tính 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 |
