javascript 一个完整的表单验证实例-js教程-PHP中文网

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

php中文网

发布： 2016-06-01 09:55:02

原创

1337人浏览过

 <HTML>
    <HEAD>
    <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>
    </HEAD>
    <BODY>
    <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 value=AK>AK
    <OPTION value=AZ>AZ
    </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>
</BODY>
</HTML>

登录后复制

简单讲一下js语法：

document.info.fname.value

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

其他方法类似。

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

立即学习“Java免费学习笔记（深入）”；