Việc xác thực biểu mẫu thường được sử dụng để xảy ra tại máy chủ, sau khi khách hàng đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Gửi. Nếu dữ liệu do khách hàng nhập không chính xác hoặc đơn giản là bị thiếu, máy chủ sẽ phải gửi lại tất cả dữ liệu cho khách hàng và yêu cầu gửi lại biểu mẫu với thông tin chính xác. Đây thực sự là một quá trình dài, từng gây nhiều gánh nặng cho máy chủ.
JavaScript cung cấp một cách để xác thực dữ liệu của biểu mẫu trên máy tính của khách hàng trước khi gửi nó đến máy chủ web. Xác thực biểu mẫu thường thực hiện hai chức năng.
Xác thực cơ bản – Trước hết, biểu mẫu phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc đều được điền vào. Nó chỉ yêu cầu một vòng lặp qua từng trường trong biểu mẫu và kiểm tra dữ liệu.
Xác thực định dạng dữ liệu – Thứ hai, dữ liệu được nhập phải được kiểm tra về hình thức và giá trị chính xác. Mã của bạn phải bao gồm logic phù hợp để kiểm tra tính chính xác của dữ liệu.
Ví dụ
Chúng tôi sẽ lấy một ví dụ để hiểu quá trình xác nhận. Đây là một biểu mẫu đơn giản ở định dạng html.
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Basic Form Validation
Trước tiên, chúng ta hãy xem cách thực hiện xác thực biểu mẫu cơ bản. Ở biểu mẫu trên, chúng tôi đang gọi xác thực() để xác thực dữ liệu khi sự kiện onsubmit đang diễn ra. Đoạn mã sau đây cho thấy việc triển khai hàm validate() này.
<script type = "text/javascript">
<!--
// Form validation code will come here.
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
Data Format Validation
Bây giờ chúng ta sẽ xem cách chúng ta có thể xác thực dữ liệu biểu mẫu đã nhập trước khi gửi nó đến máy chủ web.
Ví dụ sau đây cho thấy cách xác thực địa chỉ email đã nhập. Một địa chỉ email phải chứa ít nhất một dấu ‘@’ và một dấu chấm (.). Ngoài ra, ‘@’ không được là ký tự đầu tiên của địa chỉ email và dấu chấm cuối cùng ít nhất phải là một ký tự sau dấu ‘@’.
Ví dụ
Hãy thử đoạn mã sau để xác thực email.
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>