validate表单验证

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="/static/js/plugin/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/plugin/validation/jquery.validate.min.js"></script>
<script type="text/javascript">
    
    
    
    $(document).ready(function(){
            //字符验证
            jQuery.validator.addMethod("stringCheck", function(value, element) {
            return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
            }, "只能包括中文字、英文字母、数字和下划线"); 
            //中文字两个字节 
            jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
                var length = value.length;
                for(var i = 0; i < value.length; i++){
                if(value.charCodeAt(i) > 127){
                length++;
                }
                }
                return this.optional(element) || ( length >= param[0] && length <= param[1] );
                }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 
            // 手机号码验证
            jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^[1][358]\d{9}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码"); 
        
            // 身份证号码验证
            jQuery.validator.addMethod("isIdCardNo", function(value, element) {
            return this.optional(element) || isIdCardNo(value);
            }, "请正确输入您的身份证号码"); 
            
            // 电话号码验证
            jQuery.validator.addMethod("isTel", function(value, element) {
            var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
            return this.optional(element) || (tel.test(value));
            }, "请正确填写您的电话号码");
            // 联系电话(手机/电话皆可)验证
            jQuery.validator.addMethod("isPhone", function(value,element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
            var tel = /^\d{3,4}-?\d{7,9}$/;
            return this.optional(element) || (tel.test(value) || mobile.test(value));
            }, "请正确填写您的联系电话");
            // 邮政编码验证
            jQuery.validator.addMethod("isZipCode", function(value, element) {
            var tel = /^[0-9]{6}$/;
            return this.optional(element) || (tel.test(value));
            }, "请正确填写您的邮政编码"); 
            
            $("#formTest").validate({
            rules:
            {
                name:{
                    required:true,
                    stringCheck : true,
                    byteRangeLength:[2,15]
                },
                telphone:{
                    required:true,
                    isMobile:true
                },
                passward:{
                    required:true,
                    minlength:6
                },
                passward_confirm:{
                    required:true,
                    minlength:6,
                    equalTo: "#passward"
                },
                email:{
                    required:true,
                    email:true
                }
            },
            messages:
                {
                    name:{
                        required:"请输入用户名",
                        stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
                        byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
                    },
                    telphone:{
                        required:"请输入正确电话ddd",
                        isMobile:"请输入一个有效的联系电话"
                    },
                    passward:{
                        required:"请输入密码",
                        minlength:jQuery.format("密码不能小于{0}个字符")
                    },
                    passward_confirm:{
                        required:"请确认",
                        minlength:"密码长度为不小于6",
                        equalTo:"两次密码不一致"
                    },
                    email:{
                        required:"请输入Email",
                        email:"请输入正确地址"
                    }
                    
                }
                
            
        });
        
        
        initTextContent();
        
        
        $(".submit").bind('click',function(){
            if($("#name").val() == '请输入用户名'){
                $("#name").val('');
            }
        });
        
    });
    
    function initTextContent(){
        $("#name").focus(function(){
            if(this.value == '请输入用户名'){
                this.value = '';
            }    
        });
        $("#name").blur(function(){
            if(this.value == ''){
                this.value = '请输入用户名';
            }
        });
    }
    
    
    
</script>
</head>
<body>

    <form id="formTest">
        <table>
            <tr>
                <td>
                    姓名:<input type="text" name="name" id="name" value="请输入用户名" />
                </td>
            </tr>
            <tr>
                <td>
                    手机号:<input type="text" name="telphone" id="telphone"  />
                </td>
            </tr>
            <tr>
                <td>
                    密码:<input type="password" name="passward" id="passward"  />
                </td>
            </tr>
            <tr>
                <td>
                    确认密码:<input type="password" name="passward_confirm" id="passward_confirm"  />
                </td>
            </tr>
            <tr>
                <td>
                    邮箱:<input name="email" id="email"  />
                </td>
            </tr>
        </table>
        <input class="submit" type="submit" value="提交"/> 
    </form>
</body>
</html>


你可能感兴趣的:(validate表单验证)