美文网首页javaScript
jquery validate 之自定义方法与remote方法用

jquery validate 之自定义方法与remote方法用

作者: 东方欲晓_莫道君行早 | 来源:发表于2019-01-15 09:50 被阅读0次

    本例中regex为验证输入框输入的值的正则限制,remote则主要用于需要后台配合的如用户名是否存在等场景

    var $XxxForm= $("#xxx-xxx");
    var icon = "<i class='zmdi zmdi-close-circle zmdi-hc-fw'></i> ";   //错误信息前的小图标
    
    $.validator.addMethod("regex", //addMethod第1个参数:方法名称
        function(value,element,params){//addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数)
            var exp = new RegExp(params);//实例化正则对象,参数为传入的正则表达式
            return exp.test(value);         //测试是否匹配
        },icon + "格式错误");//addMethod第3个参数:默认错误信息
    
    validator = $XxxForm.validate({
            rules: {
                aaa: {
                    required: true,
                    regex:/^[a-zA-Z]{1}([a-zA-Z0-9]){4,19}$/,
                    remote: {
                        url: "xxx/xxxx",
                        type: "get",
                        dataType: "json",
                        data: {
                            XXX: function () {
                                return $("input[name='XX']").val().trim();
                            },
                            XX: function () {
                                return $("input[name='XX']").val().trim();
                            }
                        }
                    }
                },
                bbb: {
                    required: true,
                    regex:/^[a-zA-Z0-9_]{6,36}$/
                },
                 ccc: {
                     required: true,
                     equalTo: "#password"
                 }
            },
            messages: {
                aaa: {
                    required: icon + "请输入aaa",
                    regex:icon + "用户名必须以英文开头,仅支持5-20位的英文或数字",
                    remote: icon + "用户名已经存在"
                },
                bbb: {
                    required: icon + "请输入bbb",
                    regex:icon + "密码强度为6-36位的数字,字母或下划线组成",
                },
                ccc: {
                    required: icon + "请再次输入新密码",
                    equalTo: icon + "两次密码输入不一致"
                }
            }
    

    相关文章

      网友评论

        本文标题:jquery validate 之自定义方法与remote方法用

        本文链接:https://www.haomeiwen.com/subject/eaephqtx.html