javascript表单验证

   做了一个javascript表单验证，个人觉得还可以。基本效果是获得焦点显示提示信息，失去焦点进行验证。

 

1、用户名验证：匹配规则为4到16个字符（包括字母和数字）。代码如下：

 

function isNumberOrLetter(s)//判断是否是数字或字母,用于验证用户名，失去焦点验证。
            {
           var regu = "^[0-9a-zA-Z]{4,16}$";
           var re = new RegExp(regu);
           if (!re.test(s))
           {
           document.getElementById ("userInf").innerHTML="用户名格式不对！";
           document.getElementById ("userInf").style.color="red";
          
           }
           else
           {
           document.getElementById ("userInf").innerHTML="用户名通过！";
           document.getElementById ("userInf").style.color="green";
            document.getElementById ("userIDCheck").innerHTML="";

 

2、密码验证：规则为6到16个字符、下划线，第一个字符为字母。

 

  

   function validatorPassword(s)//验证规则为6到16数字、字母、下划线组成，首字母为字母，用于验证密码。
               {
                 regu="^[a-zA-Z][0-9a-zA-Z_]{5,15}$";
                 re=new RegExp(regu);
                if (!re.test(s))
                {
                   document.getElementById ("passwordInf").innerHTML="不对！";
                   document.getElementById ("passwordInf").style.color="red";
                }
                else
                {
                  document.getElementById ("passwordInf").innerHTML="通过！";
                  document.getElementById ("passwordInf").style.color="green";
                  document.getElementById ("passwordCheck").innerHTML="";
                }
//               alert("6到16个数字、下划线和英文字符,第一个必须为字母,不区分字母大小写");
               }

 

3、密码确认：验证两次密码必须一致。

 

    function passwordConfirm(s)//确认密码验证
           {
             if(s.toLowerCase()!=document.getElementById ("password").value.toLowerCase())
             {
                   document.getElementById ("confirmInf").innerHTML="密码不一致！";
                   document.getElementById ("confirmInf").style.color="red";
               
             }
             else
             {
                  document.getElementById ("confirmInf").innerHTML="通过！";
                  document.getElementById ("confirmInf").style.color="green";
                  document.getElementById ("confirmCheck").innerHTML="";
             }
//              alert("两次密码输入不一致");
           }

4、邮箱验证：

 

    function isEmail(strEmail) //邮箱验证
           {
              if (strEmail.search(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/) == -1)
              {
                 document.getElementById ("emailInf").innerHTML="格式不对！";
                 document.getElementById ("emailInf").style.color="red";
              }
              else
              {
                  document.getElementById ("emailInf").innerHTML="通过！";
                  document.getElementById ("emailInf").style.color="green";
                  document.getElementById ("emailCheck").innerHTML="";
              }
//               alert("Email格式不正确！");
              
              
//               document.formSignUp.email.value="";
//               document.formSignUp.email.focus();
           }

 

5、身份证验证：包括15位和18位。

 

   function idNumber(s)//身份证验证
           {
             regu1=/^[1-9]/d{7}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{3}$/;//15wei
             regu2=/^[1-9]/d{5}[1-9]/d{3}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{4}$/;//18wei
             re1=new RegExp(regu1);
             re2=new RegExp(regu2);
            
             if(!(re1.test(s)||re2.test(s)))
             {
                   document.getElementById ("idCardInf").innerHTML="格式不对！";
                   document.getElementById ("idCardInf").style.color="red";
               
             }
             else
             {
                  document.getElementById ("idCardInf").innerHTML="通过！";
                  document.getElementById ("idCardInf").style.color="green";
                  document.getElementById ("idCardCheck").innerHTML="";
             }
            
//             alert("请正确填写18位或15位身份证号码");
           }

 

6、手机号码验证：13和15开头的号码。

 

   function isMobileNO(s)//手机验证
           {
             var a = /^((/(/d{3}/))|(/d{3}/-))?13/d{9}|15/d{9}$/ ;
           if( !s.match(a) )
           {
               document.getElementById ("mobileNOInf").innerHTML="格式不对！";
               document.getElementById ("mobileNOInf").style.color="red";
//                   alert("手机号码格式不对");
           }
           else
           {
                  document.getElementById ("mobileNOInf").innerHTML="通过！";
                  document.getElementById ("mobileNOInf").style.color="green";
                  document.getElementById ("mobileNOCheck").innerHTML="";
           }
          
           }

 

7、各表单域提示信息，获得焦点验证。

 

      function displayInform(s)//注册信息规则提示信息（获得焦点验证）
           {
             if(s=="user")
             document.getElementById ("userIDCheck").innerHTML="(用户名由4-16个数字或字母组成)";
             if(s=="password")
             document.getElementById ("passwordCheck").innerHTML="(密码由6-16个数字、字母、下划线组成，首字母必须是字母,不区分大小写)";
             if(s=="passwordC")
             document.getElementById ("confirmCheck").innerHTML="(两次密码输入必须一致)";
             if(s=="idCard")
             document.getElementById ("idCardCheck").innerHTML="(请输入正确的号码，以便你更容易找回密码)";
             if(s=="mobileNO")
             document.getElementById ("mobileNOCheck").innerHTML="(请输入正确的号码，以便你更快找回密码)";
             if(s=="email")
             document.getElementById ("emailCheck").innerHTML="(请输入正确的邮箱地址，以便你更容易找回密码)";
            
           }

 

8、表单提交验证：先对必填项进行非空验证，再进行匹配验证。

 

    function submitValidator() //提交验证
          {
            if(document.getElementById("control").style.display=="inline")
            {
                if((document.getElementById ("user").value=="")||(document.getElementById("password").value=="")||(document.getElementById("passwordC").value=="")||(document.getElementById("answer").value=="")||(document.getElementById("question").value==""))
               {
                  alert("必填项不能为空！");
                   return false;
                }
                else
               {
                  if((document.getElementById ("user").value).match(/^[0-9a-zA-Z]{4,16}$/)&&(document.getElementById("password").value).match(/^[a-zA-Z][0-9a-zA-Z_]{5,15}$/)&&
                  (document.getElementById ("password").value.toLowerCase()==document.getElementById ("passwordC").value.toLowerCase()))
                  {return true;}
                  else
                  {alert("输入格式不对");return false;}
                }
            }
            else
            {
               if((document.getElementById ("user").value=="")||(document.getElementById("password").value=="")||(document.getElementById("passwordC").value=="")||(document.getElementById("answer").value==""))
               {
                  alert("必填项不能为空！");
                   return false;
                }
                else
               {
                  if((document.getElementById ("user").value).match(/^[0-9a-zA-Z]{4,16}$/)&&(document.getElementById("password").value).match(/^[a-zA-Z][0-9a-zA-Z_]{5,15}$/)&&
                  (document.getElementById ("password").value.toLowerCase()==document.getElementById ("passwordC").value.toLowerCase()))
                  {return true;}
                  else
                  {alert("输入格式不对");return false;}
                }
            }

 

  因为有个自定义密码提示问题，所以搞了这么长。

 

 

   总结， 自己测试过了，效果都有了。