Form Validation trong JavaScript

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ả

Quảng cáo

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>

Quảng cáo

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>

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: