js表单注册验证

刚刚开始学js，归纳可用功能

简单的js 注册验证

javascript代码

<span style="font-size:14px;"><script type="text/javascript">
    function checkname(){
        na=form1.yourname.value;
        if( na.length <1 || na.length >12)  
        {      
            divname.innerHTML='<font class="tips_false">长度是1~12个字符</font>';
            //这里可以使用alert("长度是1~12个字符");个人感觉每个输入都使用提示框输出信息，不是很友好，会让用户体验比较差！
        }else{  
            divname.innerHTML='<font class="tips_true">输入正确</font>';
           
        }  
    
  }
  //验证密码
    function checkpassword1(){   
        psd1=form1.yourpass.value; 
        var flagZM=false ;
        var flagSZ=false ;
        var flagQT=false ;
        if(psd1.length<6 || psd1.length>12){  
            divpassword1.innerHTML='<font class="tips_false">长度错误</font>';
        }else
            {  
              for(i=0;i < psd1.length;i++)  
                {   
                    if((psd1.charAt(i) >= 'A' && psd1.charAt(i)<='Z') || (psd1.charAt(i)>='a' && psd1.charAt(i)<='z'))
                    {  
                        flagZM=true;
                    }
                    else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')   
                    {
                        flagSZ=true;
                    }else   
                    {
                        flagQT=true;
                    }  
                }  
                if(!flagZM||!flagSZ||flagQT){
                divpassword1.innerHTML='<font class="tips_false">密码必须是字母数字的组合</font>';
                 
                }else{
                    
                divpassword1.innerHTML='<font class="tips_true">输入正确</font>';
                 
                } 
             
            }    
    }
    //验证确认密码
    function checkpassword2(){
            if(form1.yourpass.value!=form1.yourpass2.value) {
                 divpassword2.innerHTML='<font class="tips_false">输入的密码不一致</font>';
            } else {
                 divpassword2.innerHTML='<font class="tips_true">输入正确</font>';
            }
    }
    //验证邮箱
    
    function checkemail(){
                apos=form1.youremail.value.indexOf("@");
                dotpos=form1.youremail.value.lastIndexOf(".");
                if (apos<1||dotpos-apos<2)
                  {
                    divmail.innerHTML='<font class="tips_false">输入错误</font>' ;
                  }
                else {
                    divmail.innerHTML='<font class="tips_true">输入正确</font>' ;
                }
    }
</script></span>

css代码

<span style="font-size:14px;">.tips_false{color:red;font-size:12px;}
.tips_true{color:green;font-size:12px;}</span>

html代码

<form name="form1" action="#" οnsubmit="return true;" method="post">
<h2 style="margin-left:50px;">用户注册</h2>
<p>
<label for="yourname">用户名：</label>
<input type="text" id="yourname" name="yourname" required οnblur="checkname()" />
<div id="divname"></div>
</p>
<p>
<label for="yourpass">密码：</label>
<input type="password" id="yourpass" name="yourpass" required οnblur="checkpassword1()" />
<div id="divpassword1"></div>
</p>
<p>
<label for="yourpass2">确认密码：</label>
<input type="password" id="yourpass2" name="yourpass2" required οnblur="checkpassword2()" />
<div id="divpassword2"></div>
</p>
<p>
<label for="youremail">电子邮箱：</label>
<input type="email" id="youremail" name="youremail" required οnblur="checkemail()" />
<div id="divmail"></div>
</p> 
<p>
<input type="submit" value="注册"  onClick="return true;"/>
<input type="button" value="取消" onClick="reset()" />
</p>
<!--reset()清空所有的输入框-->
</form>

更多的表单验证，请参考《更多表单验证》：http://blog.csdn.net/linda_ke/article/details/51167698

写得不好的，请多多指正！