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

最新推荐文章于 2021-07-23 11:26:26 发布

Quan_qqqq

最新推荐文章于 2021-07-23 11:26:26 发布

阅读量2.8k

点赞数

文章标签： jQuery.validate jQuery.validate动态显示提示信心触发验证方式修改前端js验证

本文链接：https://blog.csdn.net/quan_qqqq/article/details/89313581

版权

在项目中遇到表单验证需求，根据下拉框选项决定验证身份证号或手机号的合法性。本文介绍了如何使用jQuery.validate进行动态提示信息显示，并讲解了自定义验证方法的实现，包括修改触发验证的方式，确保不合法输入时提供相应错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在公司写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。