Validate 使用remote进行网络校验，并根据返回的值不同显示不同提示信息

问题分析

验证用户账号是否已存在。在验证用户填入的是手机号格式账号后发起网络请求，查询该账号是否已经存在。

校验代码

 $("#form").validate({
        rules: {
            userName: {
                required: true,
                isPhone: true,
                remote: {
                    type: "GET",
                    url: "getUserName", //请求地址
                    data: {
                        userName: function () {
                            return $("input[name='userName']").val();
                        },
                        uid: getUid,
                        token: getToken
                    },
                    dataFilter: function (data) {
                        var jsonData = JSON.parse(data);
                        if (jsonData.data) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            }
        },
        messages: {
            userName: {
                remote: "暂无账号信息！<a οnclick='register()' style='color: #0e9aef;float: right'>点击注册</a>"
            }
        },
        submitHandler: function (form) {
        	...
        },
        errorElement: 'div',
        wrapper: "p",
        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        },
    });

function getUid() {
    return uid;
}

function getToken() {
    return token;
}

注意事项

• validate校验顺序是按照rules里写的顺序校验的，写在前面的会先校验，校验不通过不会校验后面的条件。
• remote校验如果填入的值与上一次触发校验时值相同，则不会发起网络校验，校验结果与之前相同。（这就比较麻烦，如果校验不通过，让用户做一些操作后本可以校验通过了，没法发起请求）
• remote底层是ajax请求，传入的参数是ajax的配置项，data属性要用方法定义获取，不然就是写死的固定值。
• dataFilter可以处理请求返回结果，返回true表示验证通过。
• messages:定义的错误提示可以是html代码，使用自定义样式。

扩展，校验多个条件根据返回值显示不同信息

validate内部是通过一个ajax请求来进行校验，ajax返回结果只能是true或false。true就是通过，false就是显示之前设定的错误信息，错误信息只能设定一个，当一个请求接口要进行多个校验就没法区分不同的校验不通过的原因。
参照网上的写法修改validateremote验证，我这里直接修改validate.min的源码，在remote: function里有一个ajax请求，修改success回调方法

a.ajax(
...
	success: function (d) {
		//添加这句暂存返回data
		var k = d;    
    	//如果d是个对象并且有success这个参数（代表原来的true，false）
    	if (k.success != undefined) {
    		//设置d
        	d = k.success;
    	}
    	
    	var f, h, i, j = d === !0 || "true" === d;
    	if (k.message != undefined) {
    		//如果data对象有message参数，则把它取出来当做错误信息
       		e.settings.messages[c.name].remote = k.message;
    	} else {
    		//否则执行原逻辑
       		e.settings.messages[c.name].remote = g.originalMessage;
    	}
    
    	j ? (i = e.formSubmitted, e.prepareElement(c), e.formSubmitted = i, e.successList.push(c), delete e.invalid[c.name], e.showErrors()) : (f = {}, h = d || e.defaultMessage(c, "remote"), f[c.name] = g.message = a.isFunction(h) ? h(b) : h, e.invalid[c.name] = !0, e.showErrors(f)), g.valid = j, e.stopRequest(c, j)
    ...

然后接口返回值是{ success: false, message: “没找到”}这样的json格式就可以了。

扩展使用dataFilter定义错误信息样式

如果我想再自定义显示样式，把html代码写在接口返回值里显然不太合适，那可以用ajax的dataFilter处理一下返回值。

remote:{
	...
	dataFilter: function (data) {
		if(data.message == "not found"){
			return JSON.stringify({
				success: false,
				message: "暂无账号信息！<a οnclick='register()' style='color: #0e9aef;float: right'>点击注册</a>"
			});
		}
	}
	...

注意返回值要json字符串，不可以是对象

validate.min.js下载链接