学习--jquery 自定义插件 可扩展 表单验证

(function ($) {

    var defaults = {}

    $.fn.extend({

        /**
         * 为指定元素添加验证
         */
        validate: function (options) {

            var options = $.extend(defaults, options);
            if ($(this).attr("validate")) {
                $(this).blur(function () {
                    // 为每个标签分配验证规则
                    var result = val_adapter($(this));
                    return result;
                });
            }
        }
        ,
        /**
         * 提交表单添加验证
         */
        validateForm: function () {

            var result = false;
            $('input,textarea', $(this)).each(function () {
                if ($(this).attr("validate")) {
                    result = val_adapter($(this));
                    if (!result) {
                        // 如果有一个false 就直接跳出form循环
                        return result;
                    }
                }
            });
            return result;
        }
    })
    ;

    /**
     * 标签提示样式
     * @param booleanVal 是否加载样式
     */
    var val_promptStyle = function (obj, booleanVal, msg) {

            // 移除样式
            $(obj).siblings('span.clx-warnning-msg').remove();
            if (!booleanVal) {
                // 添加样式
                var span_show = $('<span class="clx-warnning-msg clx-fr"></span>').html(msg);
                $(obj).before(span_show);
            }
        }
        ;

    /**
     * 字符串转成 json对象
     * @param str 针对这种类型的字符串 （validate="isNotNull: true, isNotNum: true"）
     * @returns {Object}
     */
    var stringConvertJson = function (str) {
            // 对象前缀
            var prefix = '[{';
            // 对象后缀
            var suffix = '}]';
            // 拼接 json串 (string 型)
            var json = prefix + str + suffix;
            // console.log(typeof json);
            // 将string 转为json
            var result = eval(json);
            return result;
        }
        ;
    /**
     * 验证方法适配器 为每个标签分配验证规则
     */
    var val_adapter = function (obj) {

            var resultBol = false;
            var validate = $(obj).attr('validate');
            var jsonObj = stringConvertJson(validate)[0];
            // 1.非空验证
            if (jsonObj.isNotNull) {
                resultBol = val_isNotNull(obj);
            }
            // 2.纯数字验证 && 上一个验证通过后
            if (jsonObj.isNotNum && resultBol) {
                resultBol = val_isNotNum(obj);
            }
            // 3.数字范围验证 && 上一个验证通过后
            if (jsonObj.valRange && resultBol) {
                resultBol = val_range(obj, jsonObj.valRange);
            }
            return resultBol;
        }
        ;

    /**
     * 1.非空验证
     */
    var val_isNotNull = function (obj) {

            var resultBol = false;
            var msg = '(此处不得为空,请重新填写)';

            if ($(obj).val()) {
                resultBol = true;
                msg = '';
            }
            val_promptStyle(obj, resultBol, msg);
            return resultBol;
        }
        ;

    /**
     * 2.数字验证
     */
    var val_isNotNum = function (obj) {

            var regexp = /^\d+$/;
            var resultBol = false;
            var objVal = $(obj).val();
            var msg = '请输纯数字!';

            if (regexp.test(objVal)) {
                resultBol = true;
                msg = '';
            }
            val_promptStyle(obj, resultBol, msg);

            return resultBol;
        }
        ;

    /**
     * 3.数字使用范围验证
     * @param range 指定数字范围 例如: validate="valRange: '0-9'"
     * 备注: 动态拼接 js正则表达式 var regexp = new RegExp('^' + regexp + '$', 'g');
     *
     */
    var val_range = function (obj, range) {

            var resultBol = false;
            // 强转为int防止出问题
            var objVal = $(obj).val();
            // 将值转为数组
            var arrayRange = range.split('-');
            // 将值转为数组 用数组中的值做范围判断
            var arr0 = parseInt(arrayRange[0]);
            var arr1 = parseInt((arrayRange[1]) ? arrayRange[1] : arrayRange[0]);
            // 拼接提示语
            var msg = '字符长度应为 [' + range + ']！';

            if (objVal.length >= arr0 && objVal.length <= arr1) {
                resultBol = true;
                msg = '';
            }
            val_promptStyle(obj, resultBol, msg);

            return resultBol;
        }
        ;

})(jQuery);