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

Trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để xác thực một biểu mẫu HTML. Chúng tôi đã thảo luận về các chủ đề Xác thực biểu mẫu HTML sau với các ví dụ

• Kiểm tra không trống
• Kiểm tra tất cả các chữ cái
• Kiểm tra tất cả các số
• Kiểm tra số nổi
• Kiểm tra chữ và số
• Kiểm tra độ dài chuỗi
• Xác thực email
• Xác thực ngày
• Mẫu đơn đăng ký
• Không có điện thoại. Thẩm định
• thẻ tín dụng số. Thẩm định
• Xác thực mật khẩu
• Xác thực địa chỉ IP

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

Xác thực biểu mẫu là quá trình đảm bảo rằng dữ liệu do người dùng cung cấp bằng biểu mẫu đáp ứng các tiêu chí được đặt để thu thập dữ liệu từ người dùng. Ví dụ: nếu bạn đang sử dụng biểu mẫu đăng ký và bạn muốn người dùng của mình gửi tên, id email và địa chỉ, bạn phải sử dụng mã (bằng JavaScript hoặc bằng bất kỳ ngôn ngữ nào khác) để kiểm tra xem người dùng đã nhập tên chỉ chứa bảng chữ cái hay không

Truy cập dữ liệu biểu mẫu

Nếu một tài liệu HTML chứa nhiều hơn một biểu mẫu, chúng có thể được truy cập dưới dạng tài liệu. form_name trong đó form_name là giá trị của thuộc tính name của phần tử biểu mẫu hoặc theo tài liệu. biểu mẫu [i] trong đó tôi là 0, 1,2,3. và tài liệu. biểu mẫu [0] đề cập đến hình thức đầu tiên của tài liệu, tài liệu. biểu mẫu [1] đề cập đến biểu mẫu thứ hai của tài liệu, v.v.

Các thành phần của biểu mẫu có thể được truy cập bằng tài liệu. form_name. form_element trong đó form_name là giá trị của thuộc tính name của phần tử form, form_element là giá trị của thuộc tính name của phần tử form

Có nhiều cách khác để truy cập biểu mẫu cũng như các thành phần của biểu mẫu cũng sử dụng DOM API. Nhưng điều đó nằm ngoài phạm vi của hướng dẫn này

Trước. Javascript. Đối tượng Java, JavaArray, JavaClass, JavaObject, JavaPackage, Gói, mặt trời, netscape
Tiếp theo. JavaScript. Biểu mẫu HTML - kiểm tra trường không trống

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource



Chia sẻ Hướng dẫn / Bài tập này trên. Facebook và Twitter

JavaScript. Lời khuyên trong ngày

email hợp lệ

const createMember = ({ email, address = {}}) => {
	const validEmail = /.+\@.+\..+/.test(email)
	if (!validEmail) throw new Error("Valid email pls")

	return {
		email,
		address: address ? address : null
	}
}

const member = createMember({ email: "[email protected]" })
console.log(member)

Giá trị mặc định của địa chỉ là một đối tượng trống {}. Khi chúng ta đặt biến thành viên bằng với đối tượng được trả về bởi hàm createMember, chúng ta đã không chuyển giá trị cho địa chỉ, điều đó có nghĩa là giá trị của địa chỉ là đối tượng trống mặc định {}. Một đối tượng trống là một giá trị trung thực, có nghĩa là điều kiện của địa chỉ ? . điều kiện null trả về true. Giá trị của địa chỉ là đối tượng rỗng {}

Trong bài viết này, chúng tôi xem xét các trường biểu mẫu HTML và các tùy chọn xác thực do HTML5 cung cấp. Chúng ta cũng sẽ xem xét cách cải thiện những điều này thông qua việc sử dụng CSS và JavaScript

Xác thực ràng buộc là gì?

Mỗi trường biểu mẫu có một mục đích. Và mục đích này thường bị chi phối bởi các ràng buộc — hoặc các quy tắc chi phối những gì nên và không nên nhập vào từng trường biểu mẫu. Ví dụ: trường

<label>your name <input type="text" name="name" /><label>

7 sẽ yêu cầu địa chỉ email hợp lệ;

Các trình duyệt hiện đại có khả năng kiểm tra xem những ràng buộc này có được người dùng quan sát hay không và có thể cảnh báo họ khi các quy tắc đó bị vi phạm. Điều này được gọi là xác nhận ràng buộc

Xác thực phía máy khách so với phía máy chủ

Phần lớn mã JavaScript được viết trong những năm đầu tiên của ngôn ngữ được xử lý xác thực biểu mẫu phía máy khách. Thậm chí ngày nay, các nhà phát triển dành thời gian đáng kể để viết các hàm để kiểm tra giá trị trường. Điều này có còn cần thiết trong các trình duyệt hiện đại không? . Trong hầu hết các trường hợp, nó thực sự phụ thuộc vào những gì bạn đang cố gắng thực hiện

Nhưng trước tiên, đây là một thông điệp cảnh báo lớn

Xác thực phía máy khách là một tính năng hay có thể ngăn các lỗi nhập dữ liệu phổ biến trước khi ứng dụng lãng phí thời gian và băng thông gửi dữ liệu đến máy chủ. Nó không thay thế cho xác thực phía máy chủ

Luôn vệ sinh dữ liệu phía máy chủ. Không phải mọi yêu cầu sẽ đến từ một trình duyệt. Ngay cả khi có, không có gì đảm bảo rằng trình duyệt đã xác thực dữ liệu. Bất kỳ ai biết cách mở công cụ dành cho nhà phát triển của trình duyệt cũng có thể bỏ qua HTML và JavaScript được tạo thủ công một cách đáng yêu của bạn

Trường đầu vào HTML5

phiếu mua hàng HTML

• <label>your name <input type="text" name="name" /><label>
  

  9 cho hộp văn bản nhiều dòng

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  0 cho danh sách tùy chọn thả xuống

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  1 cho… nút

Nhưng bạn sẽ sử dụng

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

2 thường xuyên nhất

<input type="text" name="username" />

Thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

3 đặt loại điều khiển và có nhiều lựa chọn tùy chọn

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

3mô tả

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

5a nút không có hành vi mặc định

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

6a kiểm tra/hộp đánh dấu

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

7a công cụ chọn màu

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

8a công cụ chọn ngày cho năm, tháng và ngày

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

9a công cụ chọn ngày và giờ

<label>your name <input type="text" name="name" /><label>

7một trường nhập email

<label>your name <input type="text" name="name" /><label>

61a một công cụ chọn tệp

<label>your name <input type="text" name="name" /><label>

62a một trường ẩn

<label>your name <input type="text" name="name" /><label>

63a một nút hiển thị hình ảnh được xác định bởi thuộc tính

<label>your name <input type="text" name="name" /><label>

64

<label>your name <input type="text" name="name" /><label>

65a một công cụ chọn tháng và năm

<label>your name <input type="text" name="name" /><label>

66aa một trường nhập số_______18a

Trình duyệt quay trở lại

<label>your name <input type="text" name="name" /><label>

54 nếu bạn bỏ qua thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

3 hoặc nó không hỗ trợ tùy chọn. Các trình duyệt hiện đại hỗ trợ tốt cho tất cả các loại, nhưng các trình duyệt cũ vẫn sẽ hiển thị trường nhập văn bản

Các thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

2 hữu ích khác bao gồm

được gán mô tả

<label>your name <input type="text" name="name" /><label>

61loại tệp tải lên

<label>your name <input type="text" name="name" /><label>

62văn bản thay thế cho các loại hình ảnh

<label>your name <input type="text" name="name" /><label>

63gợi ý cho trường tự động hoàn thành

<label>your name <input type="text" name="name" /><label>

64trường tiêu điểm khi tải trang

<label>your name <input type="text" name="name" /><label>

65phương thức nhập phương tiện truyền thông

<label>your name <input type="text" name="name" /><label>

66hộp kiểm/radio được chọn

<label>your name <input type="text" name="name" /><label>

67tắt kiểm soát (nó sẽ không được xác thực hoặc giá trị của nó được gửi)

<label>your name <input type="text" name="name" /><label>

68liên kết với một biểu mẫu bằng cách sử dụng ID này

<label>your name <input type="text" name="name" /><label>

69URL để gửi khi gửi

Trường đầu ra HTML

Cũng như các loại đầu vào, HTML5 cung cấp đầu ra chỉ đọc

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  51. một kết quả văn bản của một phép tính hoặc hành động của người dùng

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  52. một thanh tiến trình với các thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  50 và

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  53

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55. thang đo có thể thay đổi giữa màu xanh lá cây, màu hổ phách và màu đỏ tùy thuộc vào các giá trị được đặt cho các thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  50,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  53,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  59,

  <input type="text" name="username" />
  

  50 và

  <input type="text" name="username" />
  

  51

Nhập nhãn

Các trường phải có một

<input type="text" name="username" />

52 được liên kết, mà bạn có thể quấn quanh phần tử

<label>your name <input type="text" name="name" /><label>

Hoặc liên kết trường

<input type="text" name="username" />

53 với nhãn bằng thuộc tính

<input type="text" name="username" />

54

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

Nhãn rất quan trọng đối với khả năng truy cập. Bạn có thể đã gặp các biểu mẫu sử dụng

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

50 để tiết kiệm không gian màn hình

<label>your name <input type="text" name="name" /><label>

6

Văn bản giữ chỗ biến mất sau khi người dùng nhập nội dung nào đó — thậm chí là một khoảng trắng. Tốt hơn là hiển thị nhãn hơn là buộc người dùng nhớ những gì trường muốn

Hành vi đầu vào

Các loại trường và thuộc tính ràng buộc thay đổi hành vi nhập liệu của trình duyệt. Ví dụ: đầu vào

<label>your name <input type="text" name="name" /><label>

66 hiển thị bàn phím số trên thiết bị di động. Trường có thể hiển thị công cụ quay vòng và nhấn con trỏ lên/xuống trên bàn phím sẽ tăng và giảm giá trị

Hầu hết các loại trường đều rõ ràng, nhưng vẫn có ngoại lệ. Ví dụ: thẻ tín dụng là số, nhưng công cụ tăng/giảm vô dụng và quá dễ dàng để nhấn lên hoặc xuống khi nhập số có 16 chữ số. Tốt hơn là sử dụng loại

<label>your name <input type="text" name="name" /><label>

54 tiêu chuẩn, nhưng đặt thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

50 thành

<input type="text" name="username" />

59, loại này sẽ hiển thị bàn phím phù hợp. Cài đặt

<label>your name <input type="text" name="name" /><label>

00 cũng đề xuất mọi số thẻ được định cấu hình trước hoặc đã nhập trước đó

Sử dụng đúng trường

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

3 và

<label>your name <input type="text" name="name" /><label>

02 mang lại những lợi ích khó đạt được trong JavaScript. Ví dụ, một số trình duyệt di động có thể

• nhập chi tiết thẻ tín dụng bằng cách quét thẻ bằng máy ảnh
• nhập mã một lần được gửi qua SMS

Xác thực tự động

Trình duyệt đảm bảo giá trị đầu vào tuân thủ các ràng buộc được xác định bởi các thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

3,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

55,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

53,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

58,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

56,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

54,

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

58 và

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

52. Ví dụ

<label>your name <input type="text" name="name" /><label>

5

Cố gắng gửi một giá trị trống sẽ ngăn việc gửi biểu mẫu và hiển thị thông báo sau trong Chrome

Công cụ quay vòng sẽ không cho phép các giá trị nằm ngoài phạm vi từ 1 đến 100. Các thông báo xác thực tương tự sẽ xuất hiện nếu bạn nhập một chuỗi không phải là số. Tất cả không có một dòng JavaScript nào

Bạn có thể dừng xác thực trình duyệt bằng cách

• thêm thuộc tính

  <label>your name <input type="text" name="name" /><label>
  

  11 vào phần tử

  <label>your name <input type="text" name="name" /><label>
  

  12
• thêm thuộc tính

  <label>your name <input type="text" name="name" /><label>
  

  13 vào nút gửi hoặc hình ảnh

Tạo đầu vào JavaScript tùy chỉnh

Nếu bạn đang viết một thành phần nhập ngày dựa trên JavaScript mới, vui lòng dừng lại và bước ra khỏi bàn phím của bạn

Khó viết các điều khiển đầu vào tùy chỉnh. Bạn phải xem xét chuột, bàn phím, cảm ứng, giọng nói, khả năng truy cập, kích thước màn hình và điều gì sẽ xảy ra khi JavaScript không thành công. Bạn cũng đang tạo trải nghiệm người dùng khác. Có lẽ khả năng kiểm soát của bạn vượt trội hơn so với công cụ chọn ngày tiêu chuẩn trên máy tính để bàn, iOS và Android nhưng giao diện người dùng không quen thuộc sẽ khiến một số người dùng nhầm lẫn

Có ba lý do chính khiến các nhà phát triển chọn tạo đầu vào dựa trên JavaScript

1. Điều khiển tiêu chuẩn rất khó tạo kiểu

Kiểu dáng CSS bị hạn chế và thường yêu cầu hack, chẳng hạn như phủ một đầu vào bằng các phần tử giả

<label>your name <input type="text" name="name" /><label>

14 và

<label>your name <input type="text" name="name" /><label>

15 của nhãn nó. Tình hình đang được cải thiện, nhưng hãy đặt câu hỏi về bất kỳ thiết kế nào ưu tiên hình thức hơn chức năng

2. Các loại your name 2 hiện đại không được hỗ trợ trong các trình duyệt cũ

Về bản chất, bạn đang viết mã cho Internet Explorer. Người dùng IE sẽ không có bộ chọn ngày nhưng vẫn có thể nhập ngày ở định dạng

<label>your name <input type="text" name="name" /><label>

17. Nếu khách hàng của bạn khăng khăng, thì chỉ tải một polyfill trong IE. Không cần phải tạo gánh nặng cho các trình duyệt hiện đại

3. Bạn yêu cầu một loại đầu vào mới chưa từng được triển khai trước đây

Những trường hợp này rất hiếm, nhưng luôn bắt đầu với các trường HTML5 thích hợp. Chúng nhanh và chúng hoạt động ngay cả trước khi tập lệnh được tải. Bạn có thể dần dần nâng cao các trường khi cần thiết. Ví dụ: một lượng nhỏ JavaScript có thể đảm bảo ngày kết thúc của sự kiện lịch xảy ra sau ngày bắt đầu

Tóm tắt. tránh phát minh lại các điều khiển HTML

Kiểu xác thực CSS

Bạn có thể áp dụng các lớp giả sau cho các trường đầu vào để tạo kiểu cho chúng theo trạng thái hiện tại

bộ chọn mô tả

<label>your name <input type="text" name="name" /><label>

18trường có tiêu điểm

<label>your name <input type="text" name="name" /><label>

19một phần tử chứa trường có tiêu điểm (vâng, đó là bộ chọn chính. )

<label>your name <input type="text" name="name" /><label>

20phần tử có tiêu điểm do điều hướng bàn phím, vì vậy cần có vòng tiêu điểm hoặc kiểu dáng rõ ràng hơn

<label>your name <input type="text" name="name" /><label>

21a trường có thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

52

<label>your name <input type="text" name="name" /><label>

23a trường không có thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

52

<label>your name <input type="text" name="name" /><label>

25a trường đã vượt qua xác thực

<label>your name <input type="text" name="name" /><label>

26a trường chưa vượt qua xác thực

<label>your name <input type="text" name="name" /><label>

27a trường đã vượt qua xác thực sau khi người dùng

Bạn có thể định kiểu văn bản

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

50 của đầu vào bằng phần tử giả

<label>your name <input type="text" name="name" /><label>

47

<label>your name <input type="text" name="name" /><label>

6

Các bộ chọn ở trên có cùng độ đặc hiệu, vì vậy thứ tự có thể quan trọng. Hãy xem xét ví dụ này

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

5

Đầu vào không hợp lệ có văn bản màu đỏ nhưng nó chỉ áp dụng cho đầu vào có thuộc tính

<label>your name <input type="text" name="name" /><label>

67 — vì vậy tất cả đầu vào đã bật đều có màu đen

Trình duyệt áp dụng các kiểu xác thực khi tải trang. Ví dụ: trong đoạn mã sau, mọi trường không hợp lệ đều có đường viền màu đỏ

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

5

Người dùng phải đối mặt với một tập hợp các hộp màu đỏ khó khăn trước khi họ tương tác với biểu mẫu. Hiển thị lỗi xác thực sau lần gửi đầu tiên hoặc khi giá trị được thay đổi sẽ mang lại trải nghiệm tốt hơn. Đó là nơi JavaScript bước vào…

JavaScript và API xác thực ràng buộc

API xác thực ràng buộc cung cấp các tùy chọn tùy chỉnh biểu mẫu có thể nâng cao khả năng kiểm tra trường HTML tiêu chuẩn. Bạn có thể

• dừng xác thực cho đến khi người dùng tương tác với một trường hoặc gửi biểu mẫu
• hiển thị thông báo lỗi với kiểu dáng tùy chỉnh
• cung cấp xác thực tùy chỉnh không thể thực hiện được trong HTML một mình. Điều này thường cần thiết khi bạn cần so sánh hai thông tin đầu vào — chẳng hạn như khi bạn nhập địa chỉ email hoặc số điện thoại, kiểm tra các trường mật khẩu “mới” và “xác nhận” có cùng giá trị hoặc đảm bảo ngày này đến ngày khác

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

Trước khi sử dụng API, mã của bạn phải tắt xác thực mặc định và thông báo lỗi bằng cách đặt thuộc tính

<label>your name <input type="text" name="name" /><label>

49 của biểu mẫu thành

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

55 (giống như thêm thuộc tính

<label>your name <input type="text" name="name" /><label>

11)

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

5

Sau đó, bạn có thể thêm trình xử lý sự kiện — chẳng hạn như khi biểu mẫu gửi

<input type="text" name="username" />

5

Trình xử lý có thể kiểm tra xem toàn bộ biểu mẫu có hợp lệ hay không bằng cách sử dụng các phương thức

<label>your name <input type="text" name="name" /><label>

52 hoặc

<label>your name <input type="text" name="name" /><label>

53, trả về

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

55 khi tất cả các đầu vào của biểu mẫu đều hợp lệ. (Sự khác biệt là

<label>your name <input type="text" name="name" /><label>

52 kiểm tra xem có bất kỳ đầu vào nào có thể xác thực ràng buộc hay không. )

Các tài liệu Mozilla giải thích

Sự kiện

<label>your name <input type="text" name="name" /><label>

56 cũng được kích hoạt trên mọi trường không hợp lệ. Điều này không bong bóng. trình xử lý phải được thêm vào mọi điều khiển sử dụng nó

<label>your name <input type="text" name="name" /><label>

0

Một biểu mẫu hợp lệ hiện có thể phải chịu thêm kiểm tra xác thực. Tương tự, một biểu mẫu không hợp lệ có thể có các trường không hợp lệ được đánh dấu

Xác thực trường

Các trường riêng lẻ có các thuộc tính xác thực ràng buộc sau

• <label>your name <input type="text" name="name" /><label>
  

  57. trả về

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55 nếu phần tử là ứng cử viên để xác thực ràng buộc

• <label>your name <input type="text" name="name" /><label>
  

  59. thông báo xác nhận. Đây sẽ là một chuỗi rỗng nếu trường hợp lệ

• <label>your name <input type="text" name="name" /><label>
  

  60. một đối tượng ValidityState. Cái này có thuộc tính

  <label>your name <input type="text" name="name" /><label>
  

  61 được đặt là

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55 khi trường này hợp lệ. Nếu là

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  56, một hoặc nhiều thuộc tính sau sẽ là

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55
  ValidityStatedescription

  <label>your name <input type="text" name="name" /><label>
  

  65trình duyệt không thể hiểu đầu vào

  <label>your name <input type="text" name="name" /><label>
  

  66a thông báo tính hợp lệ tùy chỉnh đã được đặt

  <label>your name <input type="text" name="name" /><label>
  

  67giá trị không khớp với thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  58 đã chỉ định

  <label>your name <input type="text" name="name" /><label>
  

  69giá trị lớn hơn thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  53

  <label>your name <input type="text" name="name" /><label>
  

  71giá trị nhỏ hơn thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55

  <label>your name <input type="text" name="name" /><label>
  

  73giá trị không khớp với quy tắc thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  58

  <label>your name <input type="text" name="name" /><label>
  

  75độ dài chuỗi lớn hơn thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  54

  <label>your name <input type="text" name="name" /><label>
  

  77chuỗi

Các trường riêng lẻ có các phương thức xác thực ràng buộc sau

• <label>your name <input type="text" name="name" /><label>
  

  82. đặt thông báo lỗi cho trường không hợp lệ. Một chuỗi trống phải được chuyển khi trường hợp lệ nếu không trường sẽ không hợp lệ mãi mãi

• <label>your name <input type="text" name="name" /><label>
  

  52. trả về

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55 khi đầu vào hợp lệ. Thuộc tính

  <label>your name <input type="text" name="name" /><label>
  

  85 thực hiện điều tương tự, nhưng

  <label>your name <input type="text" name="name" /><label>
  

  52 cũng kích hoạt sự kiện

  <label>your name <input type="text" name="name" /><label>
  

  56 trên trường có thể hữu ích

Hàm xử lý

<label>your name <input type="text" name="name" /><label>

88 có thể lặp qua mọi trường và áp dụng lớp

<label>your name <input type="text" name="name" /><label>

56 cho phần tử cha của nó khi cần thiết

<label>your name <input type="text" name="name" /><label>

1

Giả sử HTML của bạn đã xác định một trường email

<label>your name <input type="text" name="name" /><label>

2

Tập lệnh áp dụng lớp

<label>your name <input type="text" name="name" /><label>

56 cho lớp

<label>your name <input type="text" name="name" /><label>

91 khi email không được chỉ định hoặc không hợp lệ. CSS có thể hiển thị hoặc ẩn thông báo xác thực khi biểu mẫu được gửi

<label>your name <input type="text" name="name" /><label>

3

Tạo Trình xác thực biểu mẫu tùy chỉnh

Phần trình diễn sau đây cho thấy một biểu mẫu liên hệ mẫu yêu cầu tên người dùng và địa chỉ email, số điện thoại hoặc cả hai

Xem Pen
Ví dụ về API xác thực ràng buộc của SitePoint (@SitePoint)
trên CodePen.

Nó được triển khai bằng cách sử dụng lớp xác thực biểu mẫu chung có tên là

<label>your name <input type="text" name="name" /><label>

92. Một phần tử biểu mẫu được chuyển khi khởi tạo một đối tượng. Có thể đặt tham số thứ hai tùy chọn

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55 để xác thực từng trường khi người dùng tương tác với nó

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  56 (mặc định) để xác thực tất cả các trường sau lần gửi đầu tiên (xác thực cấp trường diễn ra sau đó)

<label>your name <input type="text" name="name" /><label>

4

Phương thức

<label>your name <input type="text" name="name" /><label>

95 định nghĩa các chức năng xác thực tùy chỉnh. Đoạn mã sau đảm bảo các trường

<label>your name <input type="text" name="name" /><label>

7 hoặc

<label>your name <input type="text" name="name" /><label>

53 hợp lệ (không có thuộc tính

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

52)

<label>your name <input type="text" name="name" /><label>

5

Một đối tượng

<label>your name <input type="text" name="name" /><label>

92 giám sát cả hai điều sau đây

• <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  00 sự kiện, sau đó kiểm tra một trường riêng lẻ
• tạo thành các sự kiện

  <label>your name <input type="text" name="name" /><label>
  

  52, sau đó kiểm tra mọi trường

Cả hai đều gọi phương thức

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

02, phương thức này kiểm tra xem một trường có vượt qua xác thực ràng buộc tiêu chuẩn hay không. Khi đó, bất kỳ chức năng xác thực tùy chỉnh nào được gán cho trường đó sẽ thực thi lần lượt. Tất cả phải trả về

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

55 để trường hợp lệ

Các trường không hợp lệ có một lớp

<label>your name <input type="text" name="name" /><label>

56 được áp dụng cho thành phần cha của trường, hiển thị thông báo trợ giúp màu đỏ bằng CSS

Cuối cùng, đối tượng gọi hàm

<label>your name <input type="text" name="name" /><label>

52 tùy chỉnh khi toàn bộ biểu mẫu hợp lệ

<label>your name <input type="text" name="name" /><label>

6

Ngoài ra, bạn có thể sử dụng một tiêu chuẩn

<label for="nameid">your namelabel>
<input type="text" id="nameid" name="name" />

06 để xử lý các sự kiện của biểu mẫu

<label>your name <input type="text" name="name" /><label>

52, vì

<label>your name <input type="text" name="name" /><label>

92 ngăn các trình xử lý tiếp theo chạy khi biểu mẫu không hợp lệ

Hình thức tinh xảo

Các biểu mẫu là cơ sở của tất cả các ứng dụng web và các nhà phát triển dành nhiều thời gian để thao tác đầu vào của người dùng. Xác nhận ràng buộc được hỗ trợ tốt. trình duyệt có thể xử lý hầu hết các kiểm tra và hiển thị các tùy chọn nhập thích hợp

khuyến nghị

• Sử dụng các loại đầu vào HTML tiêu chuẩn nếu có thể. Đặt các thuộc tính

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  55,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  53,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  58,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  56,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  54,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  58,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  52,

  <label for="nameid">your namelabel>
  <input type="text" id="nameid" name="name" />
  

  50 và

  <label>your name <input type="text" name="name" /><label>
  

  63 cho phù hợp
• Nếu cần, hãy sử dụng một chút JavaScript để bật xác thực và thông báo tùy chỉnh
• Đối với các trường phức tạp hơn, tăng dần các đầu vào tiêu chuẩn

Cuối cùng. quên Internet Explorer

Trừ khi khách hàng của bạn chủ yếu là người dùng IE, không cần triển khai các chức năng xác thực dự phòng của riêng bạn. Tất cả các trường nhập HTML5 đều hoạt động trong IE nhưng có thể yêu cầu nhiều nỗ lực hơn của người dùng. (Ví dụ: IE sẽ không phát hiện khi bạn nhập địa chỉ email không hợp lệ. ) Bạn vẫn phải xác thực dữ liệu trên máy chủ, vì vậy hãy cân nhắc sử dụng dữ liệu đó làm cơ sở kiểm tra lỗi IE

Chia sẻ bài viết này

Craig Buckler

Craig là một nhà tư vấn web tự do ở Vương quốc Anh, người đã xây dựng trang đầu tiên của mình cho IE2. 0 vào năm 1995. Kể từ thời điểm đó, anh ấy đã ủng hộ các tiêu chuẩn, khả năng truy cập và các kỹ thuật HTML5 thực hành tốt nhất. Anh ấy đã tạo các thông số kỹ thuật doanh nghiệp, trang web và ứng dụng trực tuyến cho các công ty và tổ chức bao gồm Nghị viện Vương quốc Anh, Nghị viện Châu Âu, Bộ Năng lượng & Biến đổi Khí hậu, Microsoft, v.v. Anh ấy đã viết hơn 1.000 bài báo cho SitePoint và bạn có thể tìm thấy anh ấy @craigbuckler

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

xác nhận mẫu giải thích với ví dụ là gì?

Tại sao xác thực cần thiết trong biểu mẫu HTML?