JavaScript

Form Validation trong JavaScript

Posted on by HKT

Form Validation thường được sử dụng trên Server, sau khi Client đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Submit. Nếu dữ liệu nhập bởi một Client là không chính xác hoặc bị lỗi, Server sẽ phải gửi tất cả dữ liệu trở lại Client và yêu cầu rằng Form đó phải được đệ trình lại với thông tin chính xác. Đây thực sự là một tiến trình kéo dài mà đặt nhiều gánh nặng lên trên Server.

JavaScript cung cấp một cách để thẩm định dữ liệu của Form trên máy tính của Client trước khi gửi nó tới Web Server. Form Validation nói chung thực hiện hai chức năng:

  • Thẩm định cơ bản (Basic Form Validation) − Đầu tiên, Form phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc được nhập đầy đủ. Nó sẽ yêu cầu chỉ một vòng lặp qua mỗi trường trong Form và kiểm tra dữ liệu.
  • Thẩm định định dạng dữ liệu (Data Format Validation) − Thứ hai, dữ liệu đã nhập phải được kiểm tra tính chính xác của Form và giá trị. Code của bạn phải có tính logic thích hợp để kiểm tra sự chính xác của dữ liệu.

Ví dụ

Chúng ta sẽ quan sát ví dụ sau để hiểu tiến trình của thẩm định. Dưới đây là một Form đơn giản trong đị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="webpage.jsp" 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>

Kết quả

Chạy theo lệnh trên để xem kết quả

Basic Form Validation

Đầu tiên chúng ta xem cách thực hiện một Basic Validation. Trong Form trên, chúng ta đang gọi validate() để thẩm định dữ liệu khi sự kiện onsubmit đang diễn ra. Code sau chỉ sự thực thi của hàm validate().

<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ẽ thấy cách thẩm định dữ liệu Form đã nhập trước khi đệ trình nó tới Web Server.

Ví dụ sau chỉ cách thẩm định một địa chỉ Email đã nhập. Một địa chỉ Email phải chứa ít nhất một ký hiệu ‘@’ và một dấu chấm (.). Ngoài ra, ‘@’ không phải là ký tự đầu tiên của địa chỉ Email, và dấu chấm cuối cùng phải ít nhất là một ký tự sau ký hiệu ‘@’.

Ví dụ

Bạn thử code sau cho thẩm định 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>