programming html

HTML mẫu

Tham gia cộng đồng, tải mẫu của bạn lên dưới dạng tệp PNG hoặc GIF, bạn phải là người tạo mẫu của mình và mẫu phải có thể điều chỉnh được

Mẫu của bạn có thể được chỉnh sửa để duy trì chất lượng mong muốn, nhưng chúng tôi sẽ luôn cung cấp cho bạn đầy đủ tín dụng cho nội dung gửi của bạn

Tất cả các mục được chấp nhận cho Các mẫu tinh tế sẽ được cung cấp miễn phí, được cấp phép theo Creative Commons, cho phép những người khác chia sẻ và xây dựng dựa trên mẫu của bạn một cách hợp pháp

Thuộc tính này được sử dụng để chỉ định biểu thức chính quy mà giá trị phần tử đầu vào được kiểm tra. Thuộc tính này hoạt động với các loại đầu vào sau. văn bản, mật khẩu, ngày tháng, tìm kiếm, email, v.v. Sử dụng thuộc tính Global title để mô tả mẫu giúp người dùng.

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

2 của HTML, sử dụng thuộc tính này để giúp chúng ta tùy chỉnh cách xác thực biểu mẫu của mình

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ư

5 và

6, đồng thời những loại này cũng được đóng gói với tính năng xác thực được xác định trước. Bất cứ khi nào giá trị đưa ra không đáp ứng với định dạng dự kiến, các loại đầu vào này sẽ đưa ra thông báo lỗi, do đó ngăn cản việc gửi

Thông báo lỗi địa chỉ email không hợp lệ [Chrome] nhờ xác thực biểu mẫu HTML5

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

2 chỉ áp dụng cho phần tử

9. Nó cho phép chúng tôi xác định quy tắc của riêng mình để xác thực giá trị đầu vào bằ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 đã chỉ định, đầu vào sẽ đưa ra lỗi

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

0 thông thường

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

2. Trong trường hợp này, chúng tôi sẽ chỉ định rằng tên người dùng chỉ được bao gồm các chữ cái viết thường; . Ngoài ra, độ dài tên người dùng không được nhiều hơn 15 ký tự. Trong RegEx, quy tắc này có thể được thể hiện dưới dạng

Thêm

2 làm giá trị của thuộc tính

2 trong mục nhập tên người dùng của chúng tôi

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

Thông báo lỗi, cho biết mẫu không khớp

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

5 trong phần tử đầu vào của chúng tôi

________số 8

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

6 vào phần tử

9 để có thể chọn nó một cách thuận tiện

Giờ đây, chúng tôi có thể chọn phần tử đầu vào bằng JavaScript và gán nó cho một biến [giữa các thẻ

8 trên trang của chúng tôi, trong một tệp JavaScript riêng biệt hoặc trong ngăn JS trên CodePen]

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ệ

Sự kiện

9 kế thừa một đối tượng

90 chứa một số thuộc tính, bao gồm thuộc tính

91 [phần tử không hợp lệ] và

92 chứa thông báo lỗi. Trong ví dụ trên, chúng tôi đã ghi đè tin nhắn văn bản bằng phương thức ________ 193

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,

94 và

95. Những điều này cho phép chúng tôi áp dụng các kiểu tùy thuộc vào trạng thái hợp lệ của đầu vào, ví dụ

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

Đầu tiên,
```
	
```
94 đượ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
```
	
```
97 thành
```
	
```
98; . Giá trị trống luôn được coi là hợp lệ, trừ khi chúng tôi đã thêm thuộc tính
```
	
```
99 . 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ử

9 và

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

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

12 mới. Chúng tôi đã đặt id cho nó là

13 và ẩn nó bằng cách đặt thuộc tính

14 thành

15. Cuối cùng, chúng tôi đã thêm

12 mới vào trong

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

18 gọi khi giá trị của đầu vào không khớp với mẫu. Chúng tôi sẽ chạy phần sau trong sự kiện

Ở đây, với

20, chúng tôi ngăn hành vi mặc định để thông báo bật lên của trình duyệt mặc định không xuất hiện. Thay vào đó, chúng tôi sẽ hiển thị của riêng mình thông qua phần tử

12 mới. Chúng tôi thêm tin nhắn văn bản vào trong nội dung, thêm một lớp mới,

22 và hiển thị tin nhắn bằng cách đặt chế độ hiển thị thành

Chúng tôi cũng thêm một lớp, ______218, 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

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

25 lớp từ Animate. css. Điều này mang lại cho nó một sự tinh tế nhất định bằng cách sử dụng hoạt ảnh lắc

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

9 . Sự kiện này gọi khi giá trị đầu vào bị thay đổi. Chúng tôi sẽ sử dụng sự kiện này để hoàn nguyên đầu vào về trạng thái bình thường, cũng như ẩn thông báo bật lên, như sau

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ử

9 và ẩn thông báo bật lên

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

Đăng nhập - Bộ giao diện người dùng biểu mẫu di độ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

2 sẽ cung cấp cho biểu mẫu của bạn một lớp xác thực bổ sung, nhưng lưu ý rằng bạn cũng nên thực hiện một số loại xác thực phía máy chủ

Đá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

Hỗ trợ thuộc tính mẫu từ caniuse. com

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

HTML mẫu là gì?

Thuộc tính mẫu là thuộc tính của văn bản, điện thoại, email, url, mật khẩu và các loại đầu vào tìm kiếm . Thuộc tính mẫu, khi được chỉ định, là một biểu thức chính quy mà giá trị của đầu vào phải khớp để giá trị vượt qua xác thực ràng buộc.

Thẻ mẫu là gì?

Định nghĩa và cách sử dụng . Ghi chú. Thuộc tính mẫu hoạt động với các loại đầu vào sau. văn bản, ngày tháng, tìm kiếm, url, điện thoại, email và mật khẩu. specifies a regular expression that the element's value is checked against on form submission. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Xác thực mẫu là gì?

Xác thực mẫu được đạt được bằng cách sử dụng biểu thức chính quy, là một chuỗi ký tự và ký hiệu xác định mẫu tìm kiếm . Ví dụ: giả sử bạn có phần tử Đầu vào mà bạn muốn người dùng nhập tên người dùng.