Các biểu mẫu có mặt khắp nơi trong các ứng dụng web. Một số ứng dụng sử dụng biểu mẫu để thu thập dữ liệu nhằm đăng ký người dùng và cung cấp địa chỉ email. Những người khác sử dụng chúng để thực hiện các giao dịch trực tuyến nhằm tạo điều kiện thuận lợi cho trải nghiệm mua sắm Bạn có thể sử dụng một số biểu mẫu web để đăng ký khoản vay mua ô tô mới, trong khi bạn sẽ sử dụng những biểu mẫu khác để đặt bánh pizza cho bữa tối. Vì vậy, điều quan trọng là dữ liệu được thu thập từ các biểu mẫu đó phải được làm sạch, định dạng chính xác và không có bất kỳ mã độc nào. Quá trình này được gọi là xác nhận mẫu Chúng tôi cần xác thực biểu mẫu bất cứ lúc nào chúng tôi chấp nhận đầu vào của người dùng. Chúng tôi phải đảm bảo rằng dữ liệu được nhập ở định dạng chính xác, nằm trong phạm vi dữ liệu hợp lệ (chẳng hạn như đối với các trường ngày) và không chứa mã độc hại có thể dẫn đến việc tiêm SQL. Dữ liệu không đúng định dạng hoặc bị thiếu cũng có thể khiến API gặp lỗi Các loại xác thực biểu mẫu khác nhau là gì?Xác thực biểu mẫu có thể xảy ra ở phía máy khách và phía máy chủ Xác thực phía máy khách xảy ra bằng cách sử dụng các thuộc tính HTML5 và JavaScript phía máy khách Bạn có thể nhận thấy rằng trong một số biểu mẫu, ngay khi bạn nhập địa chỉ email không hợp lệ, biểu mẫu sẽ báo lỗi "Vui lòng nhập email hợp lệ". Loại xác thực ngay lập tức này thường được thực hiện thông qua JavaScript phía máy khách Trong các trường hợp khác, bạn có thể nhận thấy rằng khi bạn điền vào biểu mẫu và nhập các chi tiết như thẻ tín dụng, nó có thể hiển thị màn hình tải và sau đó hiển thị lỗi "Thẻ tín dụng này không hợp lệ" Tại đây, biểu mẫu đã thực hiện cuộc gọi đến mã phía máy chủ và trả về lỗi xác thực sau khi thực hiện kiểm tra thẻ tín dụng bổ sung. Trường hợp xác thực nơi cuộc gọi phía máy chủ được thực hiện được gọi là xác thực phía máy chủ Dữ liệu nào cần được xác thực?Xác thực biểu mẫu là cần thiết bất cứ khi nào bạn chấp nhận dữ liệu từ người dùng. Điều này có thể bao gồm - Xác thực định dạng của các trường như địa chỉ email, số điện thoại, mã zip, tên, mật khẩu
- Xác thực các trường bắt buộc
- Kiểm tra loại dữ liệu như chuỗi so với số cho các trường như số an sinh xã hội
- Đảm bảo rằng giá trị đã nhập là giá trị hợp lệ như quốc gia, ngày, v.v.
Cách thiết lập xác thực phía máy kháchVề phía khách hàng, xác thực có thể được thực hiện theo hai cách - Sử dụng chức năng HTML5
- Sử dụng JavaScript
Cách thiết lập xác thực với chức năng HTML5HTML5 cung cấp một loạt các thuộc tính để giúp xác thực dữ liệu. Dưới đây là một số trường hợp xác thực phổ biến - Tạo các trường bắt buộc bằng cách sử dụng
<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
0 - Hạn chế độ dài của dữ liệu
<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
1, <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
2. cho dữ liệu văn bản<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
3 và <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
0 cho giá trị tối đa của loại num
- Hạn chế loại dữ liệu bằng cách sử dụng
<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
1 - Chỉ định các mẫu dữ liệu bằng cách sử dụng
<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
3- chỉ định một mẫu biểu thức chính quy mà dữ liệu biểu mẫu đã nhập cần phải khớp
Khi giá trị đầu vào khớp với xác thực HTML5 ở trên, nó sẽ được gán một lớp giả <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
4 và <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
5 nếu khôngHãy thử một ví dụ <form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>
Liên kết đến JSFiddle Ở đây chúng tôi có hai trường bắt buộc - Tên và Họ. Hãy thử ví dụ này trong JSFiddle. Nếu bạn bỏ qua một trong hai trường này và nhấn gửi, bạn sẽ nhận được thông báo "Vui lòng điền vào trường này". Đây là xác thực bằng cách sử dụng HTML5 tích hợp Cách thiết lập xác thực bằng JavaScriptKhi triển khai xác thực biểu mẫu, có một số điều cần xem xét - Điều gì được định nghĩa là dữ liệu "hợp lệ"?
- Điều gì xảy ra khi nhập dữ liệu không hợp lệ?
Bạn có thể thực hiện xác thực JavaScript theo hai cách - Xác thực nội tuyến bằng JavaScript
- API xác thực ràng buộc HTML5
Xác thực nội tuyến bằng JavaScript<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
____8#nameError {
display: none;
font-size: 0.8em;
}
#nameError.visible {
display: block;
}
input.invalid {
border-color: red;
}
Liên kết đến JSFiddle Trong ví dụ này, chúng tôi kiểm tra các trường bắt buộc bằng JavaScript. Nếu không có trường bắt buộc, chúng tôi sử dụng CSS để hiển thị thông báo lỗi Nhãn Aria được sửa đổi tương ứng để báo hiệu lỗi. Bằng cách sử dụng CSS để hiển thị/ẩn lỗi, chúng tôi đang giảm số lượng thao tác DOM mà chúng tôi cần thực hiện. Thông báo lỗi được cung cấp trong ngữ cảnh do đó làm cho trải nghiệm người dùng trở nên trực quan API xác thực ràng buộc HTML5Các thuộc tính HTML <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
0 và <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
3 có thể giúp thực hiện xác thực cơ bản. Nhưng nếu bạn muốn xác thực phức tạp hơn hoặc muốn cung cấp thông báo lỗi chi tiết, bạn có thể sử dụng API xác thực ràng buộcMột số phương pháp được cung cấp bởi API này là <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
8<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
9const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
0
Các thuộc tính sau đây rất hữu ích const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
1const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
2const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
3
Trong ví dụ này, chúng tôi sẽ xác thực bằng cách sử dụng các phương thức sẵn có của HTML5, chẳng hạn như <form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
0 và const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
5 kết hợp với API xác thực ràng buộc để cung cấp thông báo lỗi chi tiết<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
8<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
9Liên kết đến JSFiddle Đừng quên xác thực phía máy chủXác thực phía máy khách không phải là kiểm tra xác thực duy nhất bạn nên làm. Bạn cũng phải xác thực dữ liệu nhận được từ máy khách của mình trên mã phía máy chủ để đảm bảo rằng dữ liệu khớp với những gì bạn mong đợi. Bạn cũng có thể sử dụng xác thực phía máy chủ để thực hiện xác minh logic nghiệp vụ không tồn tại ở phía máy khách Các phương pháp hay nhất về Xác thực biểu mẫu- Luôn có xác thực phía máy chủ, vì các tác nhân độc hại có thể bỏ qua xác thực phía máy khách
- Cung cấp thông báo lỗi chi tiết trong ngữ cảnh với trường gây ra lỗi
- Cung cấp ví dụ về dữ liệu sẽ trông như thế nào trong trường hợp có thông báo lỗi, chẳng hạn như - "Email không khớp với định dạng - test@example. com"
- Tránh sử dụng các trang lỗi đơn liên quan đến chuyển hướng. Đây là trải nghiệm người dùng không tốt và buộc người dùng phải quay lại trang trước để sửa biểu mẫu và mất ngữ cảnh
- Luôn đánh dấu các trường bắt buộc
QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO
Shruti KapoorĐọc thêm bài viết
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Có bao nhiêu loại xác thực trong JavaScript?
Có hai loại xác thực biểu mẫu khác nhau – Xác thực phía máy khách và xác thực phía máy chủ. Xác thực phía máy khách Javascript là xác thực xảy ra trong trình duyệt trước khi dữ liệu được gửi đến máy chủ
Xác thực biểu mẫu và các loại của nó là gì?
Xác thực biểu mẫu hữu ích khi bạn cần người dùng nhập thông tin cần đáp ứng các yêu cầu nhất định. Có hai tiêu chuẩn xác nhận. xác thực phía máy chủ và xác thực phía máy khách . Có một số cách để đạt được xác thực mẫu chính xác cho từng tiêu chuẩn này.
5 loại xác thực là gì?
Sau đây là các Loại xác thực dữ liệu phổ biến. Kiểm tra định dạng . Kiểm tra tính nhất quán . Kiểm tra tính duy nhất . Kiểm tra hiện diện .
Mục đích chính của xác nhận là gì?
Mục đích của việc xác thực, như một hành động chung, là để thiết lập sự tuân thủ của bất kỳ đầu ra hoạt động nào so với đầu vào của hoạt động . Nó được sử dụng để cung cấp thông tin và bằng chứng cho thấy việc chuyển đổi các yếu tố đầu vào đã tạo ra kết quả đúng như mong đợi. | 
