Javascript 简明教程

JavaScript - Form Validation

表单验证通常在客户端输入所有必要数据并按下了提交按钮后在服务器上发生。如果客户端输入的数据不正确或丢失，服务器将不得不将所有数据发送回客户端，并要求使用正确的信息重新提交该表单。这确实是一个冗长的过程，过去给服务器带来了很大的负担。

Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.

Javascript 提供了一种方法，可以在将表单数据发送到 Web 服务器之前在客户端计算机上验证其数据。表单验证通常执行两个功能。

JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Form validation generally performs two functions.

  1. Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.

  2. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

Example

我们将通过一个例子来了解验证的过程。以下是一个 html 格式的简单表单。

We will take an example to understand the process of validation. Here is a simple form in html format.

<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

首先让我们看看如何执行基本表单验证。在上述表单中，我们调用 validate() 以在 onsubmit 事件发生时验证数据。以下代码显示了该 validate() 函数的实现。

First let us see how to do a basic form validation. In the above form, we are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function.

<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

现在，我们将看到如何在提交到 Web 服务器之前验证我们的已输入表单数据。

Now we will see how we can validate our entered form data before submitting it to the web server.

以下示例显示了如何验证输入的电子邮件地址。电子邮件地址必须至少包含一个“@”符号和一个点（.）。此外，“@”不能是电子邮件地址的第一个字符，而最后一个点必须至少是“@”符号之后的一个字符。

The following example shows how to validate an entered email address. An email address must contain at least a ‘@’ sign and a dot (.). Also, the ‘@’ must not be the first character of the email address, and the last dot must at least be one character after the ‘@’ sign.

Example

尝试以下代码进行电子邮件验证。

Try the following code for email validation.

<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>