Hướng dẫn html error message examples - ví dụ về thông báo lỗi html

Sau đây là danh sách các mã lỗi HTML phổ biến nhất. ... Mã lỗi HTML phổ biến ..

HTML có hiển thị lỗi không?

• Bản thân HTML không bị lỗi cú pháp vì trình duyệt phân tích cú pháp một cách thoải mái, có nghĩa là trang vẫn hiển thị ngay cả khi có lỗi cú pháp. Các trình duyệt có các quy tắc tích hợp để nêu cách diễn giải đánh dấu bằng văn bản không chính xác, vì vậy bạn sẽ có được một cái gì đó chạy, ngay cả khi đó không phải là những gì bạn mong đợi.
• Làm cách nào để hiển thị lỗi mà không có hộp cảnh báo?
• Chúng ta có thể hiển thị lỗi với hai phương thức mà không cần sử dụng hộp cảnh báo. Cú pháp: node.textContent = "Một số thông báo lỗi" // để vẽ nút chú ý.
• Tôi hiển thị lỗi biểu mẫu ở đâu?

Hai vị trí phổ biến nhất cho các thông báo lỗi nằm ở đầu biểu mẫu và nội tuyến với các trường sai lầm. Vị trí nào trực quan hơn cho người dùng? Một nghiên cứu đã phát hiện ra rằng việc hiển thị tất cả các thông báo lỗi ở đầu biểu mẫu đặt tải nhận thức cao vào bộ nhớ người dùng.form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation. form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

Trước khi gửi dữ liệu đến máy chủ, điều quan trọng là đảm bảo tất cả các điều khiển biểu mẫu cần thiết được điền vào, ở định dạng chính xác. Điều này được gọi là xác thực biểu mẫu phía máy khách và giúp đảm bảo dữ liệu được gửi khớp với các yêu cầu được quy định trong các điều khiển biểu mẫu khác nhau. Bài viết này dẫn bạn qua các khái niệm cơ bản và ví dụ về xác thực hình thức phía khách hàng.

Chúng tôi muốn làm cho việc điền vào các biểu mẫu web dễ dàng nhất có thể. Vậy tại sao chúng ta khăng khăng xác nhận các hình thức của chúng ta? Có ba lý do chính:

• Chúng tôi muốn có được dữ liệu phù hợp, theo định dạng phù hợp. Các ứng dụng của chúng tôi sẽ không hoạt động đúng nếu dữ liệu của người dùng của chúng tôi được lưu trữ ở định dạng sai, không chính xác hoặc bị bỏ qua hoàn toàn. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether.
• Chúng tôi muốn bảo vệ dữ liệu của người dùng. Buộc người dùng của chúng tôi nhập mật khẩu an toàn giúp bảo vệ thông tin tài khoản của họ dễ dàng hơn.. Forcing our users to enter secure passwords makes it easier to protect their account information.. Forcing our users to enter secure passwords makes it easier to protect their account information.
• Chúng tôi muốn bảo vệ chính mình. Có nhiều cách mà người dùng độc hại có thể sử dụng sai các hình thức không được bảo vệ để làm hỏng ứng dụng. Xem bảo mật trang web.. There are many ways that malicious users can misuse unprotected forms to damage the application. See Website security. . There are many ways that malicious users can misuse unprotected forms to damage the application. See Website security.

  CẢNH BÁO: Không bao giờ tin tưởng dữ liệu được truyền vào máy chủ của bạn từ máy khách. Ngay cả khi biểu mẫu của bạn đang xác thực chính xác và ngăn chặn đầu vào bị dị tật ở phía máy khách, người dùng độc hại vẫn có thể thay đổi yêu cầu mạng. Never trust data passed to your server from the client. Even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. Never trust data passed to your server from the client. Even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request.

Các loại xác thực phía máy khách khác nhau

Có hai loại xác thực phía máy khách khác nhau mà bạn sẽ gặp trên web:

• Xác thực biểu mẫu tích hợp sử dụng các tính năng xác thực biểu mẫu HTML, mà chúng tôi đã thảo luận ở nhiều nơi trong suốt mô-đun này. Xác nhận này thường không yêu cầu nhiều JavaScript. Xác thực biểu mẫu tích hợp có hiệu suất tốt hơn JavaScript, nhưng nó không thể tùy chỉnh như xác thực JavaScript. uses HTML form validation features, which we've discussed in many places throughout this module. This validation generally doesn't require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not as customizable as JavaScript validation. uses HTML form validation features, which we've discussed in many places throughout this module. This validation generally doesn't require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not as customizable as JavaScript validation.
• Xác thực JavaScript được mã hóa bằng JavaScript. Xác thực này hoàn toàn có thể tùy chỉnh, nhưng bạn cần tạo tất cả (hoặc sử dụng thư viện). validation is coded using JavaScript. This validation is completely customizable, but you need to create it all (or use a library). validation is coded using JavaScript. This validation is completely customizable, but you need to create it all (or use a library).

Sử dụng xác thực biểu mẫu tích hợp

Một trong những tính năng quan trọng nhất của các điều khiển hình thức hiện đại là khả năng xác nhận hầu hết dữ liệu người dùng mà không cần dựa vào JavaScript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác thực trên các yếu tố biểu mẫu. Chúng tôi đã thấy nhiều trong số này sớm hơn trong khóa học, nhưng để tóm tắt lại:

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  0: Chỉ định xem một trường biểu mẫu có cần được điền trước khi có thể gửi biểu mẫu hay không.

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  1 và

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  2: Chỉ định độ dài tối thiểu và tối đa của dữ liệu văn bản (chuỗi).

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  3 và

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  4: Chỉ định các giá trị tối thiểu và tối đa của các loại đầu vào số.

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  5: Chỉ định liệu dữ liệu cần phải là số, địa chỉ email hoặc một số loại cài đặt trước cụ thể khác.

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  6: Chỉ định một biểu thức chính quy xác định một mẫu mà dữ liệu đã nhập cần phải tuân theo.

Nếu dữ liệu được nhập trong một trường biểu mẫu tuân theo tất cả các quy tắc được chỉ định bởi các thuộc tính trên, thì nó được coi là hợp lệ. Nếu không, nó được coi là không hợp lệ.

Khi một yếu tố hợp lệ, những điều sau đây là đúng:

• Phần tử phù hợp với lớp giả CSS, cho phép bạn áp dụng một kiểu cụ thể cho các yếu tố hợp lệ.
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ gửi biểu mẫu, miễn là không có gì khác ngăn không cho nó làm như vậy (ví dụ: JavaScript).

Khi một phần tử không hợp lệ, những điều sau đây là đúng:

• Phần tử phù hợp với lớp giả CSS và đôi khi các lớp giả UI khác (ví dụ:

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  9) tùy thuộc vào lỗi, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử không hợp lệ.
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ chặn biểu mẫu và hiển thị thông báo lỗi.

Ví dụ xác nhận biểu mẫu tích hợp

Trong phần này, chúng tôi sẽ kiểm tra một số thuộc tính mà chúng tôi đã thảo luận ở trên.

Tệp bắt đầu đơn giản

Hãy bắt đầu với một ví dụ đơn giản: một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Để bắt đầu, hãy tạo một bản sao của

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Thuộc tính cần thiết

Tính năng xác thực HTML đơn giản nhất là thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Thêm thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Lưu ý các CSS được bao gồm trong tệp ví dụ:

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

CSS này làm cho đầu vào có đường viền đứt nét màu đỏ khi nó không hợp lệ và một đường viền màu đen rắn tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây:

Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được lấy nét, thông báo lỗi mặc định ("Vui lòng điền vào trường này") xuất hiện và biểu mẫu được ngăn chặn được gửi.

Sự hiện diện của thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Lưu ý: Đối với trải nghiệm người dùng tốt, hãy cho biết người dùng khi cần trường biểu mẫu. Nó không chỉ trải nghiệm người dùng tốt, nó được yêu cầu bởi các hướng dẫn tiếp cận WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần: ví dụ, tại sao bạn thực sự cần biết giới tính hoặc tiêu đề của ai đó? For good user experience, indicate to the user when form fields are required. It isn't only good user experience, it is required by WCAG accessibility guidelines. Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title? For good user experience, indicate to the user when form fields are required. It isn't only good user experience, it is required by WCAG accessibility guidelines. Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title?

Xác nhận dựa trên biểu thức chính quy

Một tính năng xác nhận hữu ích khác là thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

RegEXPS khá phức tạp và chúng tôi không có ý định dạy bạn một cách triệt để trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn một ý tưởng cơ bản về cách chúng hoạt động.

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64 - khớp với một ký tự là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64 (không phải

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66, không phải

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  67, v.v.).

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  68 - khớp

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  71.
• ________ 52 phù hợp với

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64, tùy chọn theo sau là một

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  71. (

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  76 hoặc

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  68)
• ________ 58 phù hợp với

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64, tùy chọn theo sau là bất kỳ số lượng

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66 nào, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  71. (

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  76,

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  68,

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  24, v.v.).

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  25 - khớp với một ký tự là

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64 hoặc

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66.

• <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  28 - khớp chính xác

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  68 hoặc chính xác

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  0 (nhưng không phải

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  1 hoặc

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  64 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  3, v.v.).

Có nhiều khả năng khác mà chúng tôi không bao gồm ở đây. Đối với một danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu biểu thức thường xuyên của chúng tôi.

Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Điều này cung cấp cho chúng tôi bản cập nhật sau - hãy thử nó:

Trong ví dụ này, phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Tại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Nếu giá trị không trống của

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Lưu ý: Một số loại phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Hạn chế độ dài của các mục nhập của bạn

Bạn có thể hạn chế độ dài ký tự của tất cả các trường văn bản được tạo bởi

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Các trình duyệt thường không để người dùng nhập giá trị dài hơn dự kiến ​​vào các trường văn bản. Trải nghiệm người dùng tốt hơn là chỉ sử dụng

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Hạn chế các giá trị của các mục nhập của bạn

Đối với các trường số (nghĩa là

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Hãy xem xét một ví dụ khác. Tạo một bản sao mới của tệp fruit-start.html.

Bây giờ xóa nội dung của phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

• Ở đây bạn sẽ thấy rằng chúng tôi đã cho trường

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  66 một

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  1 và

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  2 của sáu, có cùng chiều dài với chuối và anh đào.
• Chúng tôi cũng đã cho trường

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  69 một

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  3 của một và

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  4 của mười. Đã nhập các số bên ngoài phạm vi này sẽ hiển thị là không hợp lệ; Người dùng sẽ không thể sử dụng mũi tên tăng/giảm để di chuyển giá trị bên ngoài phạm vi này. Nếu người dùng theo cách thủ công một số bên ngoài phạm vi này, dữ liệu không hợp lệ. Số không cần thiết, vì vậy việc loại bỏ giá trị vẫn sẽ dẫn đến giá trị hợp lệ.

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Đây là ví dụ chạy trực tiếp:

Lưu ý:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ví dụ đầy đủ

Dưới đây là một ví dụ đầy đủ để hiển thị việc sử dụng các tính năng xác nhận tích hợp của HTML. Đầu tiên, một số HTML:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Và bây giờ một số CSS để tạo kiểu HTML:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Điều này hiển thị như sau:

Xem các thuộc tính liên quan đến xác thực để biết danh sách đầy đủ các thuộc tính có thể được sử dụng để hạn chế các giá trị đầu vào và các loại đầu vào hỗ trợ chúng.

Xác thực các biểu mẫu bằng cách sử dụng JavaScript

Bạn phải sử dụng JavaScript nếu bạn muốn kiểm soát giao diện của các thông báo lỗi bản địa. Trong phần này, chúng tôi sẽ xem xét các cách khác nhau để làm điều này.

API xác nhận ràng buộc

Hầu hết các trình duyệt đều hỗ trợ API xác thực ràng buộc, bao gồm một tập hợp các phương thức và thuộc tính có sẵn trên các giao diện DOM phần tử biểu mẫu sau:

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  908 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  910 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  911)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  912 (đại diện cho một phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  0)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  914 (đại diện cho một phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  915)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  916 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  917)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  918 (đại diện cho phần tử

  <form>
    <label for="choose">Would you prefer a banana or cherry?label>
    <input id="choose" name="i-like" />
    <button>Submitbutton>
  form>
  

  25)

API xác thực ràng buộc làm cho các thuộc tính sau có sẵn trên các yếu tố trên.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  920: Trả về một thông báo được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không thỏa mãn (nếu có). Nếu điều khiển không phải là ứng cử viên để xác thực ràng buộc (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  921 là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  922) hoặc giá trị của phần tử thỏa mãn các ràng buộc của nó (là hợp lệ), điều này sẽ trả về một chuỗi trống.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  923: Trả về một đối tượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  924 chứa một số thuộc tính mô tả trạng thái hợp lệ của phần tử. Bạn có thể tìm thấy chi tiết đầy đủ của tất cả các thuộc tính có sẵn trong trang tham chiếu

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  924; Dưới đây được liệt kê một vài trong số những cái phổ biến hơn:

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    926: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 nếu giá trị không khớp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    6 được chỉ định và

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó phù hợp. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    931: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 nếu giá trị dài hơn độ dài tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    2 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó ngắn hơn hoặc bằng tối đa. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    936: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 Nếu giá trị ngắn hơn độ dài tối thiểu được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    1 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó lớn hơn hoặc bằng tối thiểu. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    941: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 nếu giá trị lớn hơn mức tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    4 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó nhỏ hơn hoặc bằng tối đa. Nếu đúng, phần tử phù hợp với các lớp giả

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 và ____29 CSS.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    947: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 nếu giá trị nhỏ hơn mức tối thiểu được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    3 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó lớn hơn hoặc bằng tối thiểu. Nếu đúng, phần tử phù hợp với các lớp giả

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 và ____29 CSS.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    953: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 nếu giá trị không nằm trong cú pháp bắt buộc (khi

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    5 là

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    22 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    957) hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu cú ​​pháp là chính xác. Nếu

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    961: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 Nếu phần tử đáp ứng tất cả các ràng buộc xác thực của nó và do đó được coi là hợp lệ hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 nếu nó không có bất kỳ ràng buộc nào. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    7 CSS Pseudo-Class;

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class khác.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    966: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    927 Nếu phần tử có thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    0, nhưng không có giá trị hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    922 khác. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry?label>
      <input id="choose" name="i-like" />
      <button>Submitbutton>
    form>
    

    8 CSS Pseudo-Class.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  921: Trả về

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  927 nếu phần tử sẽ được xác thực khi biểu mẫu được gửi;

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  922 khác.

API xác thực ràng buộc cũng cung cấp các phương thức sau có sẵn trên các phần tử trên và phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  975: Trả về

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  927 Nếu giá trị của phần tử không có vấn đề về tính hợp lệ;

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  922 khác. Nếu phần tử không hợp lệ, phương pháp này cũng kích hoạt một sự kiện

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  978 vào phần tử.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  979: Báo cáo (các) trường không hợp lệ bằng cách sử dụng các sự kiện. Hữu ích khi kết hợp với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  980 trong trình xử lý sự kiện

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  981

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  982: Thêm thông báo lỗi tùy chỉnh vào phần tử; Nếu bạn đặt thông báo lỗi tùy chỉnh, phần tử được coi là không hợp lệ và lỗi được chỉ định sẽ được hiển thị. Điều này cho phép bạn sử dụng mã JavaScript để thiết lập lỗi xác thực ngoài các lỗi được cung cấp bởi các ràng buộc xác thực HTML tiêu chuẩn. Thông báo được hiển thị cho người dùng khi báo cáo vấn đề.

Thực hiện thông báo lỗi tùy chỉnh

Như bạn đã thấy trong các ví dụ ràng buộc xác thực HTML trước đó, mỗi khi người dùng cố gắng gửi biểu mẫu không hợp lệ, trình duyệt sẽ hiển thị thông báo lỗi. Cách thông báo này được hiển thị tùy thuộc vào trình duyệt.

Những tin nhắn tự động này có hai nhược điểm:

• Không có cách tiêu chuẩn để thay đổi giao diện của họ với CSS.
• Chúng phụ thuộc vào ngôn ngữ trình duyệt, điều đó có nghĩa là bạn có thể có một trang bằng một ngôn ngữ nhưng một thông báo lỗi được hiển thị bằng ngôn ngữ khác, như đã thấy trong ảnh chụp màn hình Firefox sau đây.

Tùy chỉnh các thông báo lỗi này là một trong những trường hợp sử dụng phổ biến nhất của API xác thực ràng buộc. Hãy làm việc thông qua một ví dụ đơn giản về cách làm điều này.

Chúng tôi sẽ bắt đầu với một số HTML đơn giản (vui lòng đặt nó vào một tệp HTML trống; sử dụng một bản sao mới của Fruit-start.html làm cơ sở, nếu bạn thích):

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Và thêm JavaScript sau vào trang:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ở đây chúng tôi lưu trữ một tham chiếu đến đầu vào email, sau đó thêm trình nghe sự kiện cho nó chạy mã chứa mỗi lần giá trị bên trong đầu vào được thay đổi.

Bên trong mã chứa, chúng tôi kiểm tra xem thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Nếu thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bạn có thể dùng thử dưới đây:

Một ví dụ chi tiết hơn

Bây giờ chúng ta đã thấy một ví dụ thực sự đơn giản, hãy xem cách chúng ta có thể sử dụng API này để xây dựng một số xác thực tùy chỉnh phức tạp hơn một chút.

Đầu tiên, HTML. Một lần nữa, hãy thoải mái xây dựng điều này cùng với chúng tôi:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Mẫu đơn giản này sử dụng thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Đầu vào của chúng tôi để xác thực là

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

Chúng tôi đang nhắm đến việc hiển thị các thông báo lỗi bên trong phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Lưu ý: Một điểm quan trọng ở đây là việc cài đặt thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bây giờ vào một số CSS cơ bản để cải thiện giao diện của biểu mẫu một chút và cung cấp một số phản hồi trực quan khi dữ liệu đầu vào không hợp lệ:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Bây giờ chúng ta hãy nhìn vào JavaScript thực hiện xác thực lỗi tùy chỉnh.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Các ý kiến ​​giải thích những điều khá tốt, nhưng ngắn gọn:

• Mỗi lần chúng tôi thay đổi giá trị của đầu vào, chúng tôi kiểm tra xem nó có chứa dữ liệu hợp lệ không. Nếu nó có thì chúng tôi sẽ xóa bất kỳ thông báo lỗi nào được hiển thị. Nếu dữ liệu không hợp lệ, chúng tôi sẽ chạy

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  999 để hiển thị lỗi thích hợp.
• Mỗi lần chúng tôi cố gắng gửi biểu mẫu, chúng tôi lại kiểm tra xem dữ liệu có hợp lệ không. Nếu vậy, chúng tôi để biểu mẫu gửi. Nếu không, chúng tôi chạy

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  999 để hiển thị lỗi thích hợp và dừng biểu mẫu gửi với

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  980.
• Hàm

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  999 sử dụng các thuộc tính khác nhau của đối tượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  923 của đầu vào để xác định lỗi là gì và sau đó hiển thị thông báo lỗi khi thích hợp.

Đây là kết quả trực tiếp:

API xác thực ràng buộc cung cấp cho bạn một công cụ mạnh mẽ để xử lý xác thực biểu mẫu, cho phép bạn có quyền kiểm soát rất lớn đối với giao diện người dùng ở trên và vượt ra ngoài những gì bạn có thể làm với HTML và CSS.

Xác thực các biểu mẫu mà không có API tích hợp

Trong một số trường hợp, chẳng hạn như điều khiển tùy chỉnh, bạn sẽ không thể hoặc không muốn sử dụng API xác thực ràng buộc. Bạn vẫn có thể sử dụng JavaScript để xác thực biểu mẫu của mình, nhưng bạn sẽ phải tự viết.

Để xác thực một biểu mẫu, hãy tự hỏi mình một vài câu hỏi:

Bạn cần xác định cách xác thực dữ liệu của mình: hoạt động chuỗi, chuyển đổi loại, biểu thức chính quy, v.v. Tuỳ bạn.

Đây rõ ràng là một vấn đề UI. Bạn phải quyết định làm thế nào biểu mẫu sẽ hoạt động. Hình thức có gửi dữ liệu không? Bạn có nên làm nổi bật các trường bị lỗi? Bạn có nên hiển thị thông báo lỗi không?

Để giảm sự thất vọng của người dùng, điều rất quan trọng là cung cấp càng nhiều thông tin hữu ích càng tốt để hướng dẫn họ sửa chữa đầu vào của họ. Bạn nên cung cấp các đề xuất trước để họ biết những gì mong đợi, cũng như thông báo lỗi rõ ràng. Nếu bạn muốn đào vào các yêu cầu UI xác thực biểu mẫu, đây là một số bài viết hữu ích bạn nên đọc:

• SmashingMagazine: Xác thực trường mẫu: Cách tiếp cận chỉ có lỗi
• Smashingmagazine: Xác thực hình thức web: Thực tiễn và hướng dẫn tốt nhất
• WebFX: 10 mẹo để tối ưu hóa khả năng sử dụng biểu mẫu web
• Một danh sách khác biệt: Xác thực nội tuyến trong các hình thức web

Một ví dụ không sử dụng API xác thực ràng buộc

Để minh họa điều này, sau đây là phiên bản đơn giản hóa của ví dụ trước mà không có API xác thực ràng buộc.

HTML gần như giống nhau; Chúng tôi vừa xóa các tính năng xác thực HTML.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Tương tự, CSS không cần phải thay đổi nhiều; Chúng tôi vừa biến lớp giả CSS Pseudo thành một lớp thực và tránh sử dụng bộ chọn thuộc tính không hoạt động trên Internet Explorer 6.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Những thay đổi lớn nằm trong mã JavaScript, cần phải thực hiện nhiều việc nâng cao hơn.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Kết quả trông như thế này:

Như bạn có thể thấy, không khó để tự mình xây dựng một hệ thống xác thực. Phần khó khăn là làm cho nó đủ chung để sử dụng cả nền tảng chéo và trên bất kỳ hình thức nào bạn có thể tạo ra. Có nhiều thư viện có sẵn để thực hiện xác thực biểu mẫu, chẳng hạn như xác nhận.js.

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Xác thực hình thức.

Bản tóm tắt

Xác thực biểu mẫu phía máy khách Đôi khi yêu cầu JavaScript nếu bạn muốn tùy chỉnh thông báo kiểu dáng và lỗi, nhưng nó luôn đòi hỏi bạn phải suy nghĩ cẩn thận về người dùng. Luôn nhớ giúp người dùng của bạn sửa dữ liệu họ cung cấp. Cuối cùng, hãy chắc chắn:

• Hiển thị thông báo lỗi rõ ràng.
• Được cho phép về định dạng đầu vào.
• Chỉ ra chính xác nơi xảy ra lỗi, đặc biệt là trên các hình thức lớn.

Khi bạn đã kiểm tra xem biểu mẫu được điền chính xác, biểu mẫu có thể được gửi. Chúng tôi sẽ bao gồm việc gửi dữ liệu biểu mẫu tiếp theo.

• Trước
• Tổng quan: Hình thức
• Tiếp theo

Trong mô -đun này

Chủ đê nâng cao