Các mẫu trong HTML là gì?

Thấp xuống

Bằng cách sử dụng thuộc tính 

<form action="somefile.php">

• Phù hợp với các loại 

  <form action="somefile.php">
  

  63 và 

  <form action="somefile.php">
  

  64. các loại đầu vào cho phép nhập dữ liệu dạng tự do và không có các mẫu được xác định trước, các giá trị phải khớp
• Giá trị của thuộc tính 

  <form action="somefile.php">
  

  62 là một biểu thức chính quy phải khớp với toàn bộ giá trị của đầu vào
• Chuỗi trống được coi là hợp lệ (không có misMatch) trừ khi thuộc tính 

  <form action="somefile.php">
  

  66 cũng xuất hiện (valueMissing)
• Biểu thức chính quy phải khớp với toàn bộ giá trị, không chỉ một phần của giá trị, như thể nó bắt đầu bằng ^ và kết thúc bằng 

  <form action="somefile.php">
  

  67, khác với cách bạn có thể quen dùng trong khớp mẫu JavaScript
• Đối với loại đầu vào 

  <form action="somefile.php">
  

  68, nếu bạn bao gồm cả thuộc tính 

  <form action="somefile.php">
  

  62 và 

  <form action="somefile.php">
  

  70, hãy nhớ rằng mẫu phải khớp với toàn bộ giá trị
• Sử dụng thuộc tính 

  <form action="somefile.php">
  

  71 để mô tả mẫu bạn mong đợi, theo thông số kỹ thuật. Khi thuộc tính 

  <form action="somefile.php">
  

  62 được bao gồm, thuộc tính 

  <form action="somefile.php">
  

  71 của mặt hàng đó sẽ có ý nghĩa đặc biệt. Nếu có mẫuKhông khớp trong quá trình xác thực ràng buộc, thì giá trị 

  <form action="somefile.php">
  

  71 sẽ được bao gồm dưới dạng nội dung trong bong bóng lỗi được hiển thị trong các trình duyệt hỗ trợ – như được hiển thị ở bên trái (“Nhập 3 ký tự” là 

  <form action="somefile.php">
  

  71). Đó là lý do tại sao điểm trước đó - mô tả mẫu bạn mong đợi, không phải mục đích của đầu vào - là điều quan trọng cần nhớ
• Nếu có thuộc tính 

  <form action="somefile.php">
  

  62, thì giá trị không trống phải khớp với thuộc tính mẫu. Nếu giá trị không khớp với biểu thức chính quy, thông báo lỗi xác thực ràng buộc patternMismatch và tiêu đề sẽ được hiển thị trong bong bóng lỗi khi gửi biểu mẫu
• Tài nguyên các mẫu hữu ích
• Android, Safari và Mobile Safari hỗ trợ thuộc tính 

  <form action="somefile.php">
  

  62 nhưng không hỗ trợ xác thực biểu mẫu, do đó sẽ không ngăn việc gửi giá trị không chính xác nhưng hỗ trợ lớp giả giao diện người dùng

Trong hướng dẫn này, chúng ta sẽ khám phá thuộc tính

<form action="somefile.php">

Video xác thực biểu mẫu

Xem video hướng dẫn bên dưới, đăng ký Tuts+ trên Youtube hoặc đọc tiếp để tìm hiểu thêm về xác thực biểu mẫu HTML và thuộc tính mẫu

Xác thực biểu mẫu HTML5 với thuộc tính “pattern”

Xác thực biểu mẫu HTML5

Xác thực biểu mẫu có tầm quan trọng sống còn đối với bảo mật của trang web cũng như khả năng sử dụng của trang web. Quá trình xác thực sẽ đánh giá xem giá trị đầu vào có ở định dạng chính xác hay không trước khi gửi. Ví dụ: nếu chúng tôi có trường nhập cho địa chỉ email, giá trị chắc chắn phải chứa địa chỉ email hợp lệ;

Đặc tả HTML5 đã giúp quá trình xác thực trở nên dễ dàng hơn một chút với việc giới thiệu các loại đầu vào mới, chẳng hạn như 

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Tuy nhiên, mong đợi mọi kịch bản đầu vào có thể được đáp ứng là không thực tế. Nếu bạn có 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 làm loại đầu vào tiêu chuẩn thì sao?

Sử dụng thuộc tính mẫu

Thuộc tính 

<form action="somefile.php">

<form action="somefile.php">

Ví dụ: giả sử chúng tôi có đầu vào tên người dùng trong biểu mẫu của mình. Không có loại tiêu chuẩn cho tên người dùng, do đó chúng tôi sử dụng loại đầu vào 

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Hãy xác định một quy tắc để thêm bằng cách sử dụng thuộc tính 

<form action="somefile.php">

<form action="somefile.php">

Thêm 

<form action="somefile.php">

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Bây giờ, vì nó chỉ chấp nhận các chữ cái viết thường, nên việc gửi bất kỳ giá trị nào khác sẽ đưa ra thông báo lỗi

Như bạn có thể thấy ở trên, thông báo lỗi cho biết “Vui lòng khớp định dạng được yêu cầu. ” Vì vậy, xác thực của chúng tôi đang hoạt động, nhưng thông báo này không giúp người dùng của chúng tôi hiểu định dạng được yêu cầu thực sự là gì. UX thất bại

Tùy chỉnh Thông báo Xác thực

May mắn thay, chúng tôi có thể tùy chỉnh thông báo để hữu ích hơn và chúng tôi có một số cách để làm như vậy. Cách tiếp cận đơn giản nhất là chỉ định thuộc tính

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Bây giờ tiêu đề được bao gồm cùng với thông báo mặc định

Tuy nhiên, thông báo bật lên không nhất quán. Nếu chúng ta so sánh nó với cái được đưa ra bởi loại đầu vào email được hiển thị trước đó, hướng dẫn thực tế có thể nổi bật hơn

Cách tiếp cận thứ hai sẽ giải quyết điều này cho chúng tôi

Thay thế Thông báo xác thực HTML5 mặc định

Bây giờ, hãy thay thế thông báo mặc định “Vui lòng khớp với định dạng được yêu cầu” bằng một thông báo hoàn toàn tùy chỉnh. Chúng tôi 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">

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

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 (giữa các thẻ

<form action="somefile.php">

1

<form action="somefile.php">

Cuối cùng, chúng tôi chỉ định thông báo được sử dụng khi đầu vào hiển thị trạng thái không hợp lệ

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Sự kiện

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Bây giờ chúng ta sẽ thấy thông báo tùy chỉnh thay thế thông báo mặc định một cách liền mạch

Tạo kiểu cho các trạng thái xác thực của chúng tôi

Để bổ sung cho các loại đầu vào mới và các phương thức này để đặt thông báo xác thực tùy chỉnh, thông số kỹ thuật CSS3 mang đến một số lớp giả hữu ích, 

<form action="somefile.php">

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

1

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

Có một số điều cần lưu ý khi sử dụng các lớp giả này

• Đầu tiên, 

  <form action="somefile.php">
  

  37 được áp dụng theo mặc định, ngay cả khi giá trị đầu vào trống. Vì vậy, như bạn có thể thấy ở trên, chúng tôi đặt 

  <form action="somefile.php">
  

  40 thành 

  <form action="somefile.php">
  

  41; . Giá trị trống luôn được coi là hợp lệ, trừ khi chúng tôi đã thêm thuộc tính 

  <form action="somefile.php">
  

  42. Trong trường hợp đó, đầu vào không hợp lệ và màu viền đỏ được cung cấp
• Các kiểu hợp lệ và không hợp lệ áp dụng ngay lập tức khi người dùng đang nhập, ngay cả khi giá trị trống. Thay đổi phong cách ngay lập tức sau đó có thể khiến người dùng hoảng sợ

Đôi lời về cách tạo kiểu cho thông báo bật lên

Xác thực biểu mẫu HTML5 đã trở thành một tiêu chuẩn mới theo thông số kỹ thuật HTML5, tuy nhiên cách cửa sổ bật lên báo lỗi xuất hiện hoàn toàn phụ thuộc vào nhà cung cấp trình duyệt. Yêu cầu tính thẩm mỹ khác nhau trong các trình duyệt khác nhau, điều này sẽ không giúp ích cho tính nhất quán của giao diện người dùng của bạn

Google Chrome đã ngăn khả năng tùy chỉnh các kiểu cửa sổ bật lên mặc định cách đây vài năm. Nếu đây là điều bạn muốn đạt được, tùy chọn còn lại duy nhất là ghi đè hoàn toàn thông báo bật lên bằng JavaScript, vì vậy, hãy xem cách hoạt động của tùy chọn đó

Tiến bộ hơn

Chúng tôi sẽ tạo một cửa sổ bật lên tùy chỉnh sẽ xuất hiện khi giá trị đầu vào của chúng tôi không hợp lệ. Để bắt đầu, chúng ta cần chọn một vài phần tử bắt buộc, cụ thể là phần tử

<form action="somefile.php">

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

1

Tiếp theo, chúng tôi sẽ tạo một phần tử mới sẽ chứa thông báo của chúng tôi

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Ở đây, chúng tôi đã tạo một phần tử 

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Làm việc với Sự kiện

Có hai sự kiện chúng ta cần giải quyết. Đầu tiên, sự kiện 

<form action="somefile.php">

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Ở đây, với

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Chúng tôi cũng thêm một lớp, ______051, vào phần tử đầu vào, tạo cho nó một màu viền đỏ. Chúng ta cũng cần đặt quy tắc kiểu trong biểu định kiểu CSS

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Ngoài ra, bạn cũng có thể thêm các lớp 

<form action="somefile.php">

Sự kiện thứ hai là sự kiện 

<form action="somefile.php">

1

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

<form action="somefile.php">

Như bạn có thể thấy ở trên, chúng tôi sẽ xóa tên lớp khỏi phần tử 

<form action="somefile.php">

Bây giờ chúng tôi có một thông báo xác thực cửa sổ bật lên được tùy chỉnh đầy đủ. Thôi buông đi. nhập bất kỳ giá trị không hợp lệ

Ghi chú. đừng quên kiểm tra Envato Elements nếu bạn đang tìm kiếm thiết kế giao diện người dùng biểu mẫu đầy cảm hứng

Suy nghĩ cuối cùng

Sử dụng các loại đầu vào tiêu chuẩn cùng với thuộc tính

<form action="somefile.php">

Đáng ngạc nhiên, ngay cả khi người dùng đã tắt JavaScript trong trình duyệt, các trình duyệt mới nhất sẽ vẫn hiển thị xác thực cửa sổ bật lên và ngăn việc gửi biểu mẫu. Trên thực tế, hỗ trợ trên tất cả các trình duyệt chính hiện nay rất vững chắc

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 hữu ích cho Xác thực biểu mẫu HTML5

Học JavaScript. Hướng dẫn hoàn chỉnh

Chúng tôi đã xây dựng một hướng dẫn đầy đủ để giúp bạn học JavaScript, cho dù bạn mới bắt đầu làm nhà phát triển web hay bạn muốn khám phá các chủ đề nâng cao hơn

Thẻ mẫu là gì?

Làm cách nào để đặt mẫu cho số điện thoại di động trong HTML?