前端注册jq验证

<form action="" method="post" name="myform">
                    <p>用户名:<input type="text" class="myinput" name="users"  maxlength="12"  placeholder="请输入用户名"   required="required" id="username"/><!--<input type="hidden"  id="hidden"/>--><span id="hidden"></span></p>
                    <p>密&nbsp;&nbsp;&nbsp;码:<input type="password" class="myinput" name="pwd"  placeholder="请输入密码" id="password"  required="required"/><span id="hidden2"></span></p>
                    <p>密&nbsp;&nbsp;&nbsp;码:<input type="password" class="myinput" name="pwds"  placeholder="请再次输入密码"  required="required" id="password2"/><span id="hidden3"></span></p>
                     <p>邮&nbsp;&nbsp;&nbsp;箱:<input type="text" class="myinput" name="email"  placeholder="请输入邮箱"  value="" required="required" id="email"/><span id="hidden4"></span></p>
                    <p>验证码:<input type="text" class="myinput" size="8" placeholder="请输入验证码" required="required"/></p>
                    <p><input type="submit" value="登录" /><input type="submit" value="注册"  disabled="disabled" id="reg"/></p>
                  </form>
                </div>
            </div>
            <div class="rightBtm"></div>
        </div>
<script type="text/javascript">       
$(function(){

  // 先定义变量
           var usernames=$('#username');
           var passwords=$('#password');
           var password2s=$('#password2');
           var emails=$('#email');
           
           var hidden1=$('#hidden');
           var hidden2=$('#hidden2');
           var hidden3=$('#hidden3');
           var hidden4=$('#hidden4');
           var username,password,password2,emali;            
            
    function check_user(){    //判断用户名是否输入正确
          if(usernames.val().length>2){
               //alert(username.val().length);
            hidden1.html('<font color="green">输入正确请继续</font>');
            username=1;
          }
          else{
              //alert(username.val().length);
            hidden1.html('<font color="red">输入错误,请输入以下划线和字母组成的昵称</font>');
            username=0;
          }
     }
    function check_pass(){
         if(passwords.val().length>=6&&passwords.val().length<=12){
           hidden2.html('<font color="green">输入正确请继续</font>');
           password=1;
         }
         else{
            hidden2.html('<font color="red">输入错误,请输入正确的密码</font>');
            password=0;
         }
    }
    function check_pass2(){
         if(password2s.val()==passwords.val()){
            hidden3.html('<font color="green">两次输入密码一样</font>');
            password2=1;
         }
         else{
            hidden3.html('<font color="red">两次输入不一样,请重新输入</font>');
            password2=0;
         }
    }
    function check_email(){
         if(emails.val().match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
            hidden4.html('<font color="green">请输入正确的邮箱</font>');
            email=1;     
         }
         else{
            hidden4.html('<font color="red">输入正确的邮箱</font>');
            email=0 ;
         }
    }
    //总函数
    function reg(){
          usernames.blur(function(){
             check_user();
             check();
          });    
         usernames.keyup(function(){
           check_user();
             check();     
         });
         passwords.blur(function(){
           check_pass();
           check();
         })
         passwords.keyup(function(){
            check_pass();
            check();  
         })
         password2s.blur(function(){
            check_pass2();
            check();
        })
         password2s.keyup(function(){
            check_pass2();
            check();
        })
         emails.blur(function(){
            check_email();
            check();    
        })    
         emails.keyup(function(){
            check_email();
            check();      
        })
    }
    
    
    
     function check(){
        if(username==1&&password==1&&password2==1&&email==1){     //这个函数是当所有的注册内容都符合的时候那个注册按钮自动变亮,这样比较安全
            $('#reg').attr('disabled',false);
            }
        else{
             $('#reg').attr('disabled',true);    
            }
     }
    
  reg();   //调用
})
       </script>

posted @ 2014-12-24 13:43  码农的boss  阅读(544)  评论(0)    收藏  举报