javascript 一个完整的表单验证实例

<code class="language-html"> 
    
    <script language="JavaScript">
    function validatePersonalInfo(){<!--  w ww. j a  va 2s . c o  m-->
      var _first = document.info.fname.value;
      var _last = document.info.lname.value;
      var _street = document.info.street.value;
      var _city = document.info.city.value;
      var _zip = document.info.zip.value;
      var _phone = document.info.phone.value;
      var _email = document.info.email.value;

      if(_first.toString() == ""){console.log("Please enter a first name.");}
      if(_last.toString() == ""){console.log("Please enter a last name.");}
      if(_street.toString() == ""){console.log("Please enter your street name.");}
      if(_city.toString() == ""){console.log("Please enter your city.");}
      if(_zip.toString() == ""){console.log("Please enter your zip.");}
      if(_phone.toString() == ""){console.log("Please enter your phone number.");}
      if(_email.toString() == ""){console.log("Please enter your email.");}
      

        var checkZip = checkNum(5);
        var phoneInput = document.info.phone.value;
        var validPhone = false;
        var validZip = false;
         if(checkZip == true){
            validZip = true;
         }
         else{
           console.log("Invalid Zip Code" + validZip);
         }
         if(!checkPhone(phoneInput)){
               console.log("Phone number is invalid." + validPhone);
            }
         else{
             validPhone = true;
         }
         if(validZip && validPhone){
            console.log("Your form has been verified");
         }
    }
    
    // Strips hyphens out of phone number and verifies that
    // phone number is valid. Any phone number in the format
    // xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid

    function checkPhone(str){
      var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/;
       return regexp.test(str);
    }
    function checkNum(length){
      var zipEntry = document.info.zip.value;
      var zipNum = parseInt(zipEntry, 10);
      if (document.info.zip.value.length == length){
        if(zipNum != 0 && isNaN(zipNum) == false){
          return true;
        }
        else {
          return false;
        }
      }
      else {
        return false;
      }
    }
    </script>
    
    
    <form name="info" action="" method="post">
    <table>
    <tr>
<td align="left">First Name:</td>
    <td align="left">
    <input type="text" name="fname" size="15">
    Last Name:
    <input type="text" name="lname" size="20">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Street:</td>
    <td align="left">
    <input type="text" name="street" size="30">
</td>
    </tr>
    <br>
    <tr>
    <td align="left">City:</td>
    <td align="left">
    <input type="text" name="city" size="15">
    State:
    <select name="state">
    <option value="AL">AL
    </option>
<option value="AK">AK
    </option>
<option value="AZ">AZ
    </option></select>
    Zip:
    <input type="text" name="zip" size="7">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Phone (w/area code):</td>
    <td align="left">
    <input type="text" name="phone" size="20">
</td>
    </tr>
    <br>
    <tr>
<td align="left">Email:</td>
    <td align="left">
    <input type="text" name="email" size="20">
</td>
    </tr>
    <br>
    </table>
    <input type="button" value="Submit" onclick="validatePersonalInfo()">
    </form>

</code>

简单讲一下js语法：

document.info.fname.value

这个js表示获取name为info表单里面name是fname的input的值。

其他方法类似。

你可以将代码复制到这里运行一把