Jquery表单验证 

<head>  
    <title>表单验证</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link type="text/css" rel="stylesheet " href="css/form.css">  
    <script type="text/javascript" src="jquery-1.11.3.js"></script>  
    <script>
        $().ready(function(){  
    //如果必填则添加*标志  
    $("form :input.required").each(function(){  
        var required=$("<strong class='high'>*</strong>");  
        $(this).parent().append(required);  
    });  
    //文本框失去焦点后  
    var bol=false;//临时保存用户名是否存在的变量
    $("form :input").blur(function(){  
        var tmppwd;//临时保存密码  
        var $parent=$(this).parent(); //匹配input的父元素 
        $parent.find(".formtips").remove();  
        if($(this).is("#username")){  
            if(this.value==""){  
                var msg="用户名不能为空";  
                //alert(msg);  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else if(this.value.length<5){
                var msg="用户名长度为5-20个字符";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else if(checkname(this.value)){
                bol=false;//将变量值还原为false  
                var msg="用户存在";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else{  
                $parent.append("<div class='formtips onSuccess'>Success!</div>");  
            }  
        }  
        if($(this).is("#password")){  
            pwd=this.value;  
            if(this.value==""){  
                var msg="密码不能为空";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else if(this.value.length<6){  
                var msg="密码长度为6-20个字符";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else{  
                $parent.append("<div class='formtips onSuccess'>Success!</div>");  
            }  
        }  
        if($(this).is("#repassword")){  
            if(this.value==""){  
                var msg="确认密码不能为空";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else if(this.value!=pwd){  
                var msg="密码不一致";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else{  
                $parent.append("<div class='formtips onSuccess'>Success!</div>");
            }  
        }  
        if($(this).is("#email")){  
            if(this.value==""){  
                var msg="邮箱不能为空";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)){  
                var msg="邮箱格式错误";  
                $parent.append("<div class='formtips onError'>"+msg+"</div>");  
            }else{  
                $parent.append("<div class='formtips onSuccess'>Success!</div>");  
            }  
        }  
        if($(this).is("#mobile")){  
            if(this.value!=""){  
                if(!/^1[3|4|5|8][0-9]\d{8}$/.test(this.value)){  
                    var msg="手机格式错误";
                    $parent.append("<div class='formtips onError'>"+msg+"</div>");  
                }else{  
                    $parent.append("<div class='formtips onSuccess'>Success!</div>");  
                }  
            }  
        }  
    })  
    
    
    
    //为键盘按下及获得焦点事件绑定"blur"  
//  .keyup(function(){  
//      $(this).triggerHandler("blur");  
//  })  
//  .focus(function(){  
//      $(this).triggerHandler("blur");  
//  });  
   //ajax传递数据   
    function checkname(name){  
        $.ajax({  
            type:"post",  
            url:"checkname",  
            async:false,  
            data:"username="+name,  
            success:function(data){  
                if(data=="true"){  
                    bol=true;
                }  
            }  
        });  
        return bol;  
    };  
      
    //提交最终验证  
    $("#send").click(function(){  
        $("form :input.required").trigger("blur");  
        var errornum=$("form .onError").length;  
        if(errornum){  
            return false;  
        }  
        alert("注册成功");  
    });  
    
    $("#clear").click(function(){
        $(".formtips").remove();  
    });  
})  
    </script>  
  </head>  
    
  <body>  
    <form action="regeist" method="post">  
        <div class="int">  
            <label for="username"> 用 户 名:</label>  
            <input type="text" id="username" class="required"/>  
        </div>  
        <div class="int">  
            <label for="password"> 密&nbsp;&nbsp;码:</label>  
            <input type="password" id="password" class="required"/>  
        </div>  
        <div class="int">  
            <label for="repassword"> 确认密码:</label>  
            <input type="password" id="repassword" class="required"/>  
        </div>  
        <div class="int">  
            <label for="email"> 邮&nbsp;&nbsp;箱:</label>  
            <input type="text" id="email" class="required"/>  
        </div>  
        <div class="int">  
            <label for="mobile">手机号码:</label> 
            <input type="text" id="mobile" >
     
        </div>  
        <div class="int">  
            <label for="birthday">出生日期:</label>  
            <input type="text" id="birthday" >  
        </div>  
        <div class="btn">  
            <input type="submit" id="send" value="提交"/>  
            <input type="reset" id="clear" value="重置"/>
        </div>  
    </form>  
  </body>
这个明显还是不错，一般自己都用这个，，我觉的还可以~
body{
    padding: 10px;
}
.onError,.high{
    color:red;
}
.onSuccess{
    color:green;
}
.int{
    margin-bottom: 20px;
}

#send,#clear{
    width:80px;
    height:40px;
    border: 0;
    background-color: #008000;
    color:#ffffff;
    border-radius: 8px;
}
#send{
    margin-right: 30px;
}
#clear{
    margin-left: 30px;
}
#birthday,#email,#mobile,#password,#repassword,#username{
    width: 150px;
    height:30px;
}

 

posted @ 2016-07-12 10:00  xiuber  阅读(344)  评论(0)    收藏  举报