让jquery validation plugin 支持zepto

做移动端快一年了，一直纠结移动端是用zepto还是用jquery，移动端一直倾向于使用zepto，无奈zepto相关插件太少了，为了让jquery插件支持zepto不得不修改插件的源代码。今天我给大家展示的是如何让jquery.validate.js支持zepto库。

1、替换不兼容的选择器

• a、将$.data(selector,dataname)改成$(selector).data(dataname);
• b、将:submit,:reset,:image,:text 改成[type='submit'],[type='image'],type='text']

2、因为jquery和zepto获取不存在属性返回的值不一样，导致Number(value)返回的值也不一样，这个会导致mix..、max..验证不能去掉；

找到以下代码

if (/min|max/.test(method) && (type === null || /number|range|text/.test(type))) {
    value = Number(value);
}

替换成

if (/min|max/.test(method) && (type === null || /number|range|text/.test(type))) {
    value = (value === null || value === "") ? "undefined" : value;
    value = Number(value);
}

3、替换$.validator.format方法

// http://jqueryvalidation.org/jQuery.validator.format/
$.validator.format = function (source, params) {
    if (arguments.length === 1) {
        return function () {
            var args = [].slice.call(arguments[0])//$.makeArray(arguments);
            args.unshift(source);
            return $.validator.format.apply(this, args);
        };
    }
    if (arguments.length > 2 && params.constructor !== Array) {
        params = [].slice.call(arguments).slice(1);//$.makeArray(arguments).slice(1);
    }

    if (params.constructor !== Array) {
        params = [params];
    }
    console.log(params);
    $.each(params, function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function () {
            return n;
        });
    });
    return source;
};

4、修复remote方法，将ajax改为同步，即添加async:false

修改后的代码

下载
请下载第二版 -修改于2015.4.27
之后又发现了一些问题，其实4是有问题，进行4的修改是因为无论表单是否验证通过都提交的问题，虽然这样也是可以修复这个bug，但是最后发现是因为以下的代码才造成这个问题。还是因为Zepto跟jQuery对属性为空时返回的结果不一样造成的。

var formnovalidateAttr = $(event.target).attr("formnovalidate");//修复null的情况下返回true的问题
if (formnovalidateAttr && formnovalidateAttr !== undefined) {
    validator.cancelSubmit = true;
}

参考文档

1. http://jqueryvalidation.org