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

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

var $XxxForm= $("#xxx-xxx");
var icon = " ";   //错误信息前的小图标

$.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 + "两次密码输入不一致"
            }
        }