表单验证 jquery.validator 和 jquery.validate 的用法

公西季
2023-12-01

1.jquery.validator

$('#form1').validator({
            theme: 'yellow_right',
            stopOnError: true,
            timely: 1,
            msgStyle : "position: relative;top:2px;",
            rules: {
                isPhone: [/(^1[34578]{1}[0-9]{9}$)/, '请输入正确的手机号码'],
                isAccount:[/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,'账户必须字母开头,允许5-16字节,允许字母数字下划线'],
                isPassword:[/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]{6,16}$/,'密码必须6-16位英文字母、数字或符号,不能是纯数字'],
                isEmail:[/^([a-z0-9A-Z]+[-|.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?.)+[a-zA-Z]{2,}$/, '请输入正确的邮箱'],
           },
            fields: {
                "account": {
                    rule: "required;isAccount;",
                    tip: "",
                    ok: " ",
                    msg: {required:"必填",isAccount:"账户必须字母开头,允许5-16字节,允许字母数字下划线"}
                },"password": {
                    rule: "required;isPassword;",
                    tip: "",
                    ok: " ",
                    msg: {required:"必填",isPassword:"密码必须6-16位英文字母、数字或符号,不能是纯数字"}
                }, "email": {
                    rule: "required;isEmail",
                    tip: "",
                    ok: " ",
                    msg: {required:"电子邮箱必须填写",isEmail:"请输入正确的邮箱"}
                },"phone": {
                    rule: "required;",
                    tip: "",
                    ok: " ",
                    msg: {required:"必填"}
                },
            }
        });




2.jquery.validate

<script type="text/javascript">

//自定义方法

$.validator.addMethod("isAccount", function(value,element) {
    var reg=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    if(reg.test(value)){
        return true;
    }
    return false;
        
}, "账户必须字母开头,允许5-16字节,允许字母数字下划线");

$.validator.addMethod("isPassword", function(value,element) {
    var reg=/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]{6,16}$/;
    if(reg.test(value)){
        return true;
    }
    return false;
        
}, "密码必须6-16位英文字母、数字或符号,不能是纯数字");

$.validator.addMethod("isEmail", function(value,element) {
    var reg=/^([a-z0-9A-Z]+[-|.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?.)+[a-zA-Z]{2,}$/;
    if(value==''){
        return true;
    }
    if(reg.test(value)){
        return true;
    }
    return false;
        
}, "请输入正确的邮箱");


$(function(){
        $('#form1').validate({
            rules: {
                "account": {
                    required:true,
                    isAccount:true          
                },
                "password": {
                    required:true,
                    isPassword:true
                },
                "email": {
                    required:false,
                    isEmail:true
                },"phone": {
                    required:true
                },
              
            },
            messages: {
                "account": {
                    required:"必填",
                    isAccount:"账户必须字母开头,允许5-16字节,允许字母数字下划线"
                },
                "password": {
                    required:"必填",
                    isPassword:"密码必须6-16位英文字母、数字或符号,不能是纯数字"
                },
                "email": {
                    isEmail:'请输入正确的邮箱'
                },"phone": {
                    required:"必填"
                },
              
            }
        });
});
</script>

 类似资料: