Trước đây, việc xác thực biểu mẫu sẽ diễn ra trên máy chủ, sau khi một người đã nhập tất cả thông tin của họ và nhấn nút gửi.
Nếu thông tin không chính xác hoặc bị thiếu, máy chủ sẽ phải gửi lại mọi thứ kèm theo thông báo yêu cầu người đó sửa biểu mẫu trước khi gửi lại.
Đây là một quá trình dài và sẽ gây ra nhiều gánh nặng cho máy chủ.
Ngày nay, JavaScript cung cấp một số cách để xác thực dữ liệu của biểu mẫu ngay trong trình duyệt trước khi gửi nó đến máy chủ.
Đây là mã HTML mà chúng tôi sẽ sử dụng trong các ví dụ sau:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
// Form validation will go here
</script>
</head>
<body>
<form id="form">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Username</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td align="right">Email Address</td>
<td><input type="text" id="email-address" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" id="submit-btn" /></td>
</tr>
</table>
</form>
</body>
</html>Xác thực cơ bản
Loại xác thực này liên quan đến việc kiểm tra tất cả các trường bắt buộc và đảm bảo chúng được điền đúng cách.
Đây là một ví dụ cơ bản của một chức năng validate hiển thị cảnh báo nếu đầu vào tên người dùng và địa chỉ email trống, nếu không, nó trả về giá trị đúng:
const submitBtn = document.getElementById('submit-btn');
const validate = (e) => {
e.preventDefault();
const username = document.getElementById('username');
const emailAddress = document.getElementById('email-address');
if (username.value === "") {
alert("Please enter your username.");
username.focus();
return false;
}
if (emailAddress.value === "") {
alert("Please enter your email address.");
emailAddress.focus();
return false;
}
return true;
}
submitBtn.addEventListener('click', validate);
Nhưng nếu ai đó nhập văn bản ngẫu nhiên làm địa chỉ email của họ thì sao? Hiện tại các validate chức năng vẫn sẽ trả về true. Như bạn có thể tưởng tượng, việc gửi dữ liệu xấu đến máy chủ có thể dẫn đến sự cố.
Đó là nơi xác thực định dạng dữ liệu xuất hiện.
Xác thực định dạng dữ liệu
Loại xác thực này thực sự xem xét các giá trị trong biểu mẫu và xác minh rằng chúng là chính xác.
Việc xác thực địa chỉ email nổi tiếng là khó khăn – có rất nhiều địa chỉ email và máy chủ lưu trữ hợp pháp và không thể đoán được tất cả các tổ hợp ký tự hợp lệ.
Điều đó nói rằng, có một số yếu tố chính phổ biến trong tất cả các địa chỉ email hợp lệ:
- Địa chỉ phải chứa một ký tự @ và ít nhất một dấu chấm (.)
- Ký tự @ không được là ký tự đầu tiên trong địa chỉ
- Các . phải có ít nhất một ký tự sau ký tự @
Với suy nghĩ này, có thể các nhà phát triển sử dụng regex để xác định xem một địa chỉ email có hợp lệ hay không. Đây là một chức năng mà Tyler McGinnis đề xuất trên blog của anh ấy:
const emailIsValid = email => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
emailIsValid('[email protected]@camp.org') // false
emailIsValid('[email protected]') // trueĐã thêm vào mã từ ví dụ trước, nó sẽ trông như thế này:
const submitBtn = document.getElementById('submit-btn');
const validate = (e) => {
e.preventDefault();
const username = document.getElementById('username');
const emailAddress = document.getElementById('email-address');
if (username.value === "") {
alert("Please enter your username.");
username.focus();
return false;
}
if (emailAddress.value === "") {
alert("Please enter your email address.");
emailAddress.focus();
return false;
}
if (!emailIsValid(emailAddress.value)) {
alert("Please enter a valid email address.");
emailAddress.focus();
return false;
}
return true; // Can submit the form data to the server
}
const emailIsValid = email => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
submitBtn.addEventListener('click', validate);
Các ràng buộc biểu mẫu HTML5
Một số ràng buộc HTML5 thường được sử dụng cho <input> là type thuộc tính (ví dụ: type="password"), maxlength, required và disabled.
Một ràng buộc ít được sử dụng hơn là pattern thuộc tính có biểu thức chính quy JavaScript.
