表单实时校验插件——jquery.validateForm.js(v.2.0)

插件名：jquery.validateForm.js

依赖：

 jquery ,  jquery.validateForm.css

参数：

暂无参数(有一个默认的msg提示)

说明：

实现了input =text , select ，textarea,radio 的实时必填校验

实现了input = number 的必填 数字类型 参数范围的校验

表单提交时，如果有错误页面会滚动到第一个出错的元素，并获取焦点

使用方法：

1.引入jquery，jquery.validateForm.css

2.给元素加data-required或者 min ，max 

3.表单绑定

html

<form type="post" action="">
    <input type="text" value="" data-required='required'>
    <select required>
        <option value="">1</option>
        <option value="2">2</option>
    </select>
    <input type="number" required value="" min="2" max="5">
</form>

js

$('form').validateForm();

jquery.validateForm.js源码

;
(function ($, window, document, undefined) {
    //默认操作
    var defaults = {
            msg: {
                required: "必填！",
                errorType: "非数字类型",
                max: "小于",
                min: "大于"
            }
        },
    //缓存实例
        _that,
    //缓存所有校验项
        _cache = [],
    //表单提交标志
        post = true,
    //插件构造
        Plugin = function (element, options) {
            _that = this;
            this.element = element;
            this.options = $.extend({}, defaults, options);
            this.init();
        };
    Plugin.prototype.init = function () {
        var $form = $(this.element);
        createErrorBox();
        // 绑定校验
        $form.find('input[type = number],input[type=text],input[type=radio],select,textarea').each(function () {
            var $this = $(this);
            $this.on('blur', function () {
                setTimeout(function () {
                    validate($this);
                }, 200)
            });
            _cache.push($this);
        });
        //表单是否要提交
        submitForm($form);
    };
    var radioFlag = false;
    //统一校验函数
    var validate = function ($elem) {

            if ($elem.attr('type') == 'number') {
                //先校验必填
                $elem.data('required') && validateRequired($elem);
                //校验数字
                !$elem.hasClass('error-validate') && validateNumber($elem);
                //校验范围
                !$elem.hasClass('error-validate') && validateRange($elem);
                return;
            }
            //radio校验
            if ($elem.attr('type') == 'radio') {
                validateRadio($elem);
                return;
            }
            $elem.data('required') && validateRequired($elem);
        },
    //表单提交
        submitForm = function ($form) {
            $('input[type=submit],button').click(function (e) {
                e.preventDefault();
                var errorElem = [];
                //取缓存,校验所有项
                $.each(_cache, function () {
                    validate(this);
                });
                //找到所有校验失败的元素及位置
                $form.find('.error-validate').each(function () {
                    errorElem.push({elem: $(this), top: $(this).offset().top});
                });
                post = errorElem.length > 0 ? false : true;
                if (post) {
                    $form.submit();
                } else {
                    $('html,body').animate({scrollTop: errorElem[0].top}, 400);
                    focusIn(errorElem[0].elem);
                }
            });
        },
    //校验必填
        validateRequired = function ($elem) {
            if (!$elem.val()) {
                $elem.addClass('error-validate').data('error', _that.options.msg.required);
                errorMsg($elem, _that.options.msg.required);
            } else {
                $elem.hasClass('error-validate') && $elem.removeClass('error-validate');
            }
        },
    //radio 校验
        validateRadio = function ($elem) {
            var $radio = $('input[name=' + '"' + $elem.attr('name') + '"' + ']');
            $radio.each(function () {
                if (this.checked) {
                    radioFlag = true;
                    return false;
                }
            });
            radioFlag ? $radio.removeClass('error-validate')
                : $radio.addClass('error-validate').data('error',_that.options.msg.required) &&
            errorMsg($elem, _that.options.msg.required);
        },
    //校验数字
        validateNumber = function ($elem) {
            var reg = /^-?\d+$/;
            reg.test($elem.val()) ? $elem.removeClass('error-validate')
                : $elem.addClass('error-validate').data('error', _that.options.msg.errorType)
            && errorMsg(_that.options.msg.errorType);
        },
    //校验范围
        validateRange = function ($elem) {
            var max = $elem.attr('max'),
                min = $elem.attr('min'),
                value = $elem.val(),
                msg = '';
            msg = min && value - 0 < min ? _that.options.msg.min + min : "";
            msg = max && value - 0 > max ? _that.options.msg.max + max : msg;

            msg && errorMsg($elem, msg);
            msg && $elem.addClass('error-validate').data('error', msg);
        },
    //错误提示
        errorMsg = function ($elem, msg) {
            $('#errorDiv')
                .css({
                    'left': $elem.offset().left,
                    'padding': $elem.css('padding'),
                    'top': $elem.offset().top + $elem.outerHeight()
                })
                .text(msg)
                .show()
                .fadeOut(2000);
        },
    //焦点获取，及错误提示
        focusIn = function ($elem) {
            $elem.trigger('focus');
            errorMsg($elem, $elem.data('error'));
        },
    //创建错误提示框
        createErrorBox = function () {
            var $div = $(document.createElement('div'));
            $div.attr('id', 'errorDiv').addClass('validateBox');
            $('body').append($div[0]);
        };
    jQuery.fn.validateForm = function (options) {
        return this.each(function () {
            if (!$.data(this, 'validateForm')) {
                $.data(this, 'validateForm', new Plugin(this, options))
            }
        });
    }

})(jQuery, window, document);

jquery.validateForm.css源码

.error-validate{border:1px solid red !important;}
.validateBox{width: 150px;height: 32px;background: #fff;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 3px 9px rgba(0,0,0,.5);position: absolute;display: none;}