jQuery Validation 日期格式 dd/MM/yyyy 验证不通过

jQuery Validation 日期格式 dd/MM/yyyy 验证不通过

ZKEASOFT July 18, 2017


jQuery Validation 日期格式 dd/MM/yyyy 验证不通过这个问题要怎么解决呢?首先我们要找到 jQuery Validation 验证日期的代码:

// http://jqueryvalidation.org/date-method/
date: function( value, element ) {
	return this.optional( element ) || !/Invalid|NaN/.test( new Date( value ).toString() );
}

失败的原因主要是因为 new Date("dd/MM/yyyy") 不支持这种日期格式。

扩展修改

问题找到了,怎么改比较好呢,直接从源代码修改也是可以,但是一但更新这个插件,你的修改就会被覆盖,说不定还得再来一遍。我们可以通过扩展、覆盖原有的验证方法来重写原有的验证方法:

$.extend($.validator.methods, {
    date: function (value, element) {
        
    }
});

按日期格式来转换

日期格式总不是固定一尘不变的,需要写一个方法来按格式转日期。如果你不想自己写,可以使用现成的插件,例如 moment.js

这里我们简单的写一个 parseDate 方法来实现:

$.extend($.validator.methods, {
    date: function (value, element) {
        function parseDate(date, format) {
            var year = 0, month = 0, day = 0, hour = 0, minute = 0, seconds = 0;
            function toNumber(n) {
                if (n == '') {
                    return -1;
                }
                return Number(n);
            }
            function yearSetter(y, p) {
                if (y < 1000) {
                    y += 2000;
                } else if (y < 1899) {
                    return false;
                }
                year = y;
                return true;
            }
            function monthSetter(m, p) {
                if (m < 1 || m > 12) {
                    return false;
                }
                month = m - 1;
                return true;
            }
            function daySetter(d, p) {
                if (d < 1 || d > 31) {
                    return false;
                }
                day = d;
                return true;
            }
            function hourSetter(h, p) {
                if (h < 0 || h > 23) {
                    return false;
                }
                hour = h;
                return true;
            }
            function minuteSetter(m, p) {
                if (m < 0 || m > 59) {
                    return false;
                }
                minute = m;
                return true;
            }
            function secondsSetter(s, p) {
                if (s < 0 || s > 59) {
                    return false;
                }
                seconds = s;
                return true;
            }
            var setterMap = {
                "y": yearSetter,
                "yy": yearSetter,
                "yyy": yearSetter,
                "yyyy": yearSetter,
                "M": monthSetter,
                "MM": monthSetter,
                "d": daySetter,
                "dd": daySetter,
                "h": hourSetter,
                "hh": hourSetter,
                "H": hourSetter,
                "HH": hourSetter,
                "m": minuteSetter,
                "mm": minuteSetter,
                "s": secondsSetter,
                "ss": secondsSetter
            };

            var split = '-';
            var length = format.length;
            for (var index = 0; index < length; index++) {
                var element = format[index];
                if (setterMap[element]) continue;
                if (date.indexOf(element) >= 0) {
                    date = date.replace(element, split);
                    format = format.replace(element, split);
                }
            }
            var formatArray = format.split(split);
            var dateArray = date.split(split);

            for (var i = 0; i < formatArray.length; i++) {
                var part = formatArray[i];
                if (!part) continue;
                var setter = setterMap[part];
                if (setter) {
                    var num = toNumber(dateArray[i]);
                    if (num >= 0) {
                        if (setter(num, part)) {
                            continue;
                        }
                    }
                }
                return null;
            }
            return new Date(year, month, day, hour, minute, seconds);
        }
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString()) || parseDate(value,$(element).data("format"));
    }
);

https://gist.github.com/


微信公众号