jQuery.validate动态显示提示信息+自定义校验验证的触发验证方式修改

最近在公司写jsp页面的时候，填写表单需要验证。并且是有两种情况，先选下拉框，如果选的是身份证号就需要验证表单里的输入的是否是合法的身份证号。如果选的是手机号就需要验证表单里输入的是否是合法的手机号。并且如果不合法还需给出不同的提示。

在网上找到了添加自定义验证方法的函数（jQuery.validator.addMethod），但是提示信息是固定的。不过最好还是找到了一个亲测比较好用的方法。

这个方法还是需要jQuery.validator.addMethod函数来写，但是第三个参数需要改变一下。

        jQuery.validator.addMethod("whiteValues", function(value, element) {
            var phoneMsg=/^[0-9]{11}$/;
            var idMsg=/^[0-9]{18}$/;
            if($("#whiteType").val()=='1'){
                if (!phoneMsg.test(value)) {
                    $(element).data('error-msg','手机号不合法');
                    return false;
                }else{
                    return true;
                }

            }else if($("#whiteType").val()=='2'){

                if (!idMsg.test(value)) {
                    $(element).data('error-msg','身份证号不合法');
                    return false;
                }else{
                    return true;
                }
            }else{
                return true;
            }
        }, function(params, element) {
            return $(element).data('error-msg');
        });

需要将第三个参数改为方法。

然后下一步就是在验证出添加上我们刚刚新加的这个验证规则。

     // validate 追加校验
        $(this).validate({
            errorPlacement: function errorPlacement(error, element) {
                element.before(error);
            },
            rules: {
                whiteType: {
                    required: true
                },
                whiteValue: {
                    required: true,
                    whiteValues:true
                },
                abType: {
                    required: true
                },
                orderType: {
                    required: true
                }
            },
            messages: {
                whiteType: {
                    required: "类型不可空"
                },
                whiteValue: {
                    required: "号码不可空"
                },
                abType: {
                    required:"AB类型必选"
                },
                orderType: {
                    required: "订单类型必选"
                }
            },
            onkeyup:false
        });

在rules中添加whiteValues:true。

 

触发验证方式修改

就是在massage的后面直接加上要修改的方式即可。