表单实时校验插件——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;}