原创的jQuery插件:jQueryValidateQY(基本功能已经完成)

最近的项目(手机站),需要实现个前端校验功能,比如大名鼎鼎的 jQuery.validate 插件,太过基础,不能满足现在的需求。另外一点就是 想前后端共用校验规则。

尝试自己写了一个,基于 jQuery,实现了:

1、无论成功或者失败,输入框自动变色(失败为红色,成功为绿色)
2、如果输入出错,自动弹出错误提示层
3、错误、正确的样式,可以通过传入参数自定义
4、可以传入 正则表达式、自定义函数校验。为了方便校验,还可以传入后端打包好的数据(Array 或 Object)。

最终实现的效果,运行效果如下:

因为已经有了 jQuery.validate 插件,直接命名为 jQueryValidateQY。(QY=启源),代码已经发布到 git@OSC。

/**
 * 源码名称:jQueryValidate.js
 * 实现功能:基于jQuery,以最简单的方式提供表单校验功能
 * 作者主页:http://www.miaoqiyuan.cn/
 * 联系邮箱:mqycn@126.com
 * 使用说明:http://www.miaoqiyuan.cn/p/jquery-validate-qy
 * 最新版本:http://git.oschina.net/mqycn/jQueryValidate
 */

(function($) {
    $.fn.extend({

        /**
         * 验证输入框是否合法
         */
        'validate': function(pattern, errMsg, styles) {
            $._validateCache = $._validateCache || {};

            var key = $(this).data('validate-cache') || 'valid_' + (new Date()).getTime() + parseInt(Math.random(10000));
            var list = $._validateCache[key] || [];
            var data = {};
            var defaultStyle = {
                'success': { //默认的成功样式
                    'border-color': '#6A974B',
                    'color': '#0C0',
                    'background': '#AFCD72',
                },
                'error': { //默认的失败样式
                    'border-color': '#C00',
                    'color': '#C00',
                    'background': '#F09692'
                },
                'tips': { //默认的提示框样式
                    'background': '#C00',
                    'color': '#FFF',
                    'padding': '5px',
                    'border': 0,
                }
            };

            //根据配置读取样式
            var styles = {};
            if (typeof pattern == 'object') {
                if ((pattern instanceof Array)) {
                    styles = errMsg;
                } else {
                    styles = pattern.styles || errMsg;
                }
            }
            styles = styles || {};
            styles.error = styles.error || defaultStyle.error;
            styles.success = styles.success || defaultStyle.success;
            styles.tips = styles.tips || defaultStyle.tips;

            if (!!pattern) {
                //添加验证规则
                var fun;

                switch (typeof pattern) {
                    case 'function':
                        fun = pattern;
                        break;
                    case 'string':
                        fun = function() {
                            return $(this).val().match(new RegExp(pattern));
                        };
                        break;

                    case 'object':
                        if (pattern instanceof Array) {
                            /** 后端的规则(比如PHP),通过模版传入
                             *  array(
                             *    'username',
                             *    '/^[A-Za-z0-9]{5,15}$/',
                             *    '用户名只能为5-10位的字母或数字组成'
                             *  );
                             */
                            return $(this).validate(pattern[1].substr(1, pattern[1].length - 2), pattern[2], styles);
                        } else {
                            /**
                             * {
                             *    fun : function(){}
                             *    error : '出错了'
                             * }
                             */
                            fun = pattern.fun || function() { return true; };
                            errMsg = pattern.error || '验证出错';
                        }
                        break;

                    default:
                        throw new Error('Bad Type');
                }

                list.push({
                    fun: fun,
                    error: errMsg,
                    styles: styles,
                });

                $(this).data('validate-cache', key);
                $._validateCache[key] = list;

                return $(this);
            } else {
                //验证是否有效
                for (var i = 0; i < list.length; i++) {
                    data = list[i];
                    //读取最后一个样式配置,无论成功失败都会被覆盖前一个
                    styles = data.styles;
                    if (!data.fun.call(this)) {
                        return $(this).validateStatus.call(this, false, styles, data);
                    }
                }
                return $(this).validateStatus.call(this, true, styles);
            }
        },

        /**
         * 显示错误提示
         */
        validateStatus: function(status, styles, data) {
            var key = $(this).data('vaildate-target');
            if (!status) {
                if (!key) {
                    key = 'tips_' + (new Date()).getTime() + parseInt(Math.random(10000));
                    $(this).data('vaildate-target', key);
                }
                if ($(this).val() == '') {
                    $(this).attr('placeholder', '').focus();
                }
                $(this).css(styles.error);
                $('input').offset();

                var $tips = $('#' + key);
                var $this = $(this);
                if ($tips.length == 0) {
                    //没有创建过提示框,自动创建
                    $('body').append('<div id="' + key + '" style="position:absolute;text-align:center;"><div class="vaildate-tips-body"></div><div class="vaildate-tips-array"></div></div>');
                    $tips = $('#' + key);
                }
                $tips.find('.vaildate-tips-body').html(data.error).css(styles.tips);
                $tips.find('.vaildate-tips-array').width(0).height(0).css({
                    'border': 'solid 5px ' + styles.tips.background,
                    'border-left-color': 'transparent',
                    'border-right-color': 'transparent',
                    'border-bottom-color': 'transparent',
                    'margin-left': '30px',
                    'margin-top': '-1px'
                });
                $tips.css('top', $this.offset().top - $tips.height() + 4);
                $tips.css('left', $this.offset().left + 10);
            } else {
                $(this).css(styles.success);
                if (!!key) {
                    var $tips = $('#' + key);
                    if (!!$tips) {
                        $tips.hide();
                    }
                }
            }
            return status;
        }
    });
})(jQuery);

使用方法:

用法一:传入函数
$(dom).validate(function, errMsg, styles);

(function() {
    $('input[name=confirm]').validate(function() {
        return $(this).val() == $('input[name=password]').val();
    }, '两次输入的密码不一致').validate();
});

用法二:传入正则表达式

$(dom).validate(patternText, errMsg, styles);

(function() {
    $('input[name=username]').validate('^[A-Za-z0-9]{5,15}$', '用户名只能为5-10位的字母或数字组成').validate();
});

用法三:直接传入数组(可以复用后台PHP的验证规则)

$(dom).validate([inputName, patternText, errMsg], styles);

(function() {
    $('input[name=username]').validate(['username', '/^[A-Za-z0-9]{5,15}$/', '用户名只能为5-10位的字母或数字组成']).validate();
});

用法四:传入对象

/**
* $(dom).validate({
* fun:function(){函数处理},
* errMsg:’错误信息’,
* styles:{ **显示样式**}
* });
*/

(function() {
    $('input[name=confirm]').validate({
        fun: function() {
            return $(this).val().match(new RegExp('^[A-Za-z0-9]{5,15}$'));
        },
        errMsg: '用户名只能为5-10位的字母或数字组成',
    }).validate();
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注