HTML之表单验证——续

验证的js代码

/// <reference path="jquery-1.7.1.min.js" />
(function ($) {
    var FormValidator = function () {
        this.regexEnum = {
            idCard: /^[1-9]([0-9]{14}|[0-9]{16})([0-9]|X)$/,
            num: /^\-?([1-9]\d*)$/,         //数字
            email: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/,
            phone: /^1[3|4|5|8]\d{9}$/,
            chinese: /^[\u0391-\uFFE5]{2,6}$/, //2-6位中文
            password: /^[a-zA-Z0-9_]{8,32}$/ //6-32位密码验证
        };
        this.validatorArr = {};
    };
 
    FormValidator.prototype.requred = function (el) {
        //        if (el.val() == '') {
        //            return false;
        //        }
        return true;
    }
 
    FormValidator.prototype.init = function () {
        var scope = this;
        $('.formValidate').each(function () {
            var el = $(this);
            scope.initItem(el);
        }); //each
    };
 
    FormValidator.prototype.initItem = function (el) {
        if (typeof el == 'string') el = $('#' + el);
        var scope = this;
        var cfg = el.attr('data-cfg');
 
        if (cfg && cfg.length > 0) {
            cfg = eval('(' + cfg + ')');
            //            cfg = JSON.parse(cfg);
            var check = cfg.check || true,
                id = el.attr('id') || new Date().getTime(),
                initMsg = cfg.initMsg || '请填入信息',
                sucMsg = cfg.sucMsg || '格式正确',
                errorMsg = cfg.errorMsg || '请注意格式',
                requred = cfg.requred || false,
                msgPosition = cfg.msgPosition || 'right';
            cfg.id = id;
            cfg.check = check;
            cfg.initMsg = initMsg;
            cfg.sucMsg = sucMsg;
            cfg.errorMsg = errorMsg;
            cfg.msgPosition = msgPosition;
            cfg.requred = requred;
 
            var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips"><div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + initMsg + '</div>');
            //                var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips">' + initMsg + '</div>');
            var offset = el.offset();
            var height = parseInt(el.outerHeight());
            var width = parseInt(el.outerWidth());
            var l = offset.left;
            var t = offset.top;
 
            if (msgPosition == 'bottom') {
                tips.addClass('posBottom');
                t += height + 4;
            } else if (msgPosition == 'right') {
                tips.addClass('posRight');
                l += width + 6;
            } else if (msgPosition == 'top') {
                tips.addClass('posTop');
                t += height * (-1) - 8;
            }
            tips.css({ left: l, top: t });
            $('body').append(tips);
 
            cfg.el = el;
            cfg.tipEl = tips;
            //该表单的验证
            cfg.validate = function () {
                scope.funcValidate(el, cfg);
            };
 
            //会触发验证的事件（取消验证后，该事件取消的话害怕引起事件丢失）
            el.change(function () {
                scope.funcValidate(el, cfg);
            });
            el.focus(function () {
                scope.funcValidate(el, cfg);
            });
            el.blur(function () {
                scope.funcValidate(el, cfg);
            });
            el.keyup(function () {
                scope.funcValidate(el, cfg);
            });
            el.keydown(function () {
                scope.funcValidate(el, cfg);
            });
 
            scope.validatorArr[id] = cfg; //生成相关验证对象
 
        } else {
            console.log('请输入完整验证信息！否则控件会产生错误！');
        }
    };
 
    FormValidator.prototype.funcValidate = function (el, cfg) {
        var id = cfg.id;
        var check = cfg.check; //判断是否开启验证
        //取消事件不执行下面逻辑
        if (!this.validatorArr[id])
            return false;
        //若是没有开启验证便忽略之
        if (!check) {
            this.validatorArr[id]['state'] = 'ignore';
            return false;
        }
 
        var type = cfg.type;
        var regexObj = cfg.regexObj; //正则相关
        var rangeObj = cfg.rangeObj; //范围验证
        var compareObj = cfg.compareObj; //范围验证
 
        var msg = '';
        var isPass = 1; //1成功，-1错误
 
        //首先进行非空验证
        if (cfg.requred) {
            if (el.val() == '') {
                isPass = -1;
                msg = '该项必填';
            }
        }
 
        //type优先
        if (isPass == 1 && el.val().length > 0 && typeof type == 'string') {
            var typeArr = type.split('|'); //可能包含验证组
            var errorArr = cfg.errorMsg.split('|'); //各个组错误时候对应的信息
            for (var i = 0, len = typeArr.length; i < len; i++) {
                var r = this.regexEnum[typeArr[i]];
                //测试通过
                if (r.test(el.val())) {
                    msg = cfg.sucMsg;
                } else {
                    isPass = -1;
                    msg = errorArr[i] ? errorArr[i] : cfg.errorMsg;
                    break; //一旦有错误的地方便中断
                }
            }
        }
        //当第一步验证通过便执行自身正则验证
        if (isPass == 1 && el.val().length > 0 && regexObj) {
            //当未指定type时候，便执行页面中的正则表达式对象
            var r = regexObj;
            if (r.test(el.val())) {
                msg = cfg.sucMsg;
            } else {
                isPass = -1;
                msg = cfg.errorMsg;
            }
        }
 
        //当第二步验证通过便执行范围验证
        if (isPass == 1 && el.val().length > 0 && rangeObj) {
            //日期验证暂时忽略
            var rangeArr = rangeObj.split('|');
            if (rangeArr.length == 3) {
                var _v = el.val();
                var _p1 = rangeArr[1];
                var _p2 = rangeArr[2];
                if (rangeArr[0] == 'num') {
                    _v = parseInt(el.val());
                    _p1 = parseInt(rangeArr[1]);
                    _p2 = parseInt(rangeArr[2]);
                }
                if (_v > _p1 && _v < _p2) {
                    msg = cfg.sucMsg;
                } else {
                    isPass = -1;
                    msg = '请填入' + rangeArr[0] + '到' + rangeArr[1] + '直接的数字';
                }
            } else {
                console.log('范围参数错误');
            }
        }
 
        //执行对比运算
        if (isPass == 1 && el.val().length > 0 && compareObj) {
            var compareArr = compareObj.split('|');
            if (compareArr.length == 3) {
                var _type = compareArr[0]
                var _id = compareArr[1];
                var _flag = compareArr[2];
                var _v = el.val();
                var _cv = $('#' + _id).val();
                if (_type == 'num') {
                    _v = parseInt(_v);
                    _cv = parseInt(_cv);
                }
 
                if (_flag == '<') {
                    if (_v < _cv) {
                        msg = cfg.sucMsg;
                    } else {
                        isPass = -1;
                        msg = '该值过大';
                    }
                }
                if (_flag == '>') {
                    if (_v > _cv) {
                        msg = cfg.sucMsg;
                    } else {
                        isPass = -1;
                        msg = '该值过小';
                    }
                }
                if (_flag == '=') {
                    if (_v == _cv) {
                        msg = cfg.sucMsg;
                    } else {
                        isPass = -1;
                        msg = '两次数据不一致';
                    }
                }
            } else {
                console.log('范围参数错误');
            }
        }
        if (msg == '') isPass = 0;
        if (isPass == 0) {
            this.validatorArr[id]['state'] = 'init';
            this.validatorArr[id]['tipEl'].removeClass('validateError');
            this.validatorArr[id]['tipEl'].removeClass('validateSuc');
            this.validatorArr[id]['tipEl'].addClass('validateInit');
            this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + cfg.initMsg);
        } else if (isPass == 1) {
            this.validatorArr[id]['state'] = 'success';
            this.validatorArr[id]['tipEl'].removeClass('validateError');
            this.validatorArr[id]['tipEl'].removeClass('validateInit');
            this.validatorArr[id]['tipEl'].addClass('validateSuc');
            this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg);
        } else if (isPass == -1) {
            this.validatorArr[id]['state'] = 'error';
            this.validatorArr[id]['tipEl'].removeClass('validateSuc');
            this.validatorArr[id]['tipEl'].removeClass('validateInit');
            this.validatorArr[id]['tipEl'].addClass('validateError');
            this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg);
        }
 
    };
 
    FormValidator.prototype.validatorAll = function () {
        for (var k in this.validatorArr) {
            var v = this.validatorArr[k];
            v.validate();
        }
    };
 
    FormValidator.prototype.removeValidator = function (id) {
        if (id && this.validatorArr[id]) {
            this.validatorArr[id].tipEl.remove(); //删除提示信息
            this.validatorArr[id]['check'] = false; //将其验证状态置为false 
            var s = '';
        }
    };
 
    FormValidator.prototype.addValidator = function (id) {
        var el = $('#' + id);
        this.initItem(el);
    };
 
    FormValidator.prototype.validatorState = function () {
        for (var k in this.validatorArr) {
            var v = this.validatorArr[k];
            if (v.state == 'error') {
                return false;
            }
        }
        return true;
    };
 
    window.FormValidator = FormValidator;
 
})(jQuery);
 
View Code

 

 

与之对应的 HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .form div { height: 30px; line-height: 30px; margin: 5px; }
        .validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }
        .validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }
        .validateError { background: orange; border: 1px solid red; }
        .validateSuc { background: #79D62D; border: 1px solid Green; }
        .triangle_icon { position: absolute; }
        .triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }
         
        /*上边提示*/
        .posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; }
        .posTop .triangle_icon .after { bottom: 1px; }
        .posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
        .posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
         
        /*右边提示*/
        .posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }
        .posRight .triangle_icon .after { left: 1px; }
        .posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
        .posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
         
        /*下边提示*/
        .posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }
        .posBottom .triangle_icon .after { top: 1px; }
        .posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
        .posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
         
         
        /*初始化时候的皮肤*/
        .validateInit .before { border-color: #F7CE39; }
        .validateInit .after { border-color: #FFFFE0; }
         
        /*失败时候的皮肤*/
        .validateError .before { border-color: red; }
        .validateError .after { border-color: orange; }
         
        /*成功时候的皮肤*/
        .validateSuc .before { border-color: Green; }
        .validateSuc .after { border-color: #79D62D; }
         
         
        /*表单相关样式，和验证无关，可删除*/
        .form { width: 820px; margin: 0 auto; }
         
        .form ul { list-style-type: none; padding-left: 0; }
         
        .form li > label { display: inline-block; min-width: 200px; padding-right: 14px; text-align: right; vertical-align: -2px; }
        .form ul .text { display: inline-block; line-height: 40px; margin-left: 10px; }
         
        /*表单相关样式，和验证无关，可删除*/
    </style>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/yexiaochai_formValidator.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var f = new FormValidator();
            f.init();
            f.validatorAll();
 
            var bt = $('#bt');
            var add = $('#add');
            var remove = $('#remove');
            var name = $('#name');
            var single = $('#single');
 
            bt.click(function () {
                f.validatorAll();
                var end = f.validatorState();
                var s = '';
            });
 
            single.click(function () {
                f.initItem(name.val());
 
                var s = '';
            });
 
            add.click(function () {
                f.addValidator(name.val());
                var s = '';
            });
 
            remove.click(function () {
                f.removeValidator(name.val());
                var s = '';
            });
 
        });
    </script>
</head>
<body>
    <div class="form">
        <input type="text" id="name" />
        <input type="button" value="取消验证" id="remove" />
        <input type="button" value="添加验证" id="add" />
        <input type="button" value="单项验证" id="single" />
        <ul>
            <li>
                <label>
                    身份证：</label>
                <div class="text">
                    <input type="text" id="idCard" class="formValidate" data-cfg="{ requred: true, type: 'idCard', msgPosition: 'right', initMsg: '请输入身份证号码！', sucMsg: '正确', errorMsg: '该项必填|格式错误'}" />
                </div>
            </li>
            <li>
                <label>
                    数字：
                </label>
                <div class="text">
                    <input type="text" id="num" class="formValidate" data-cfg="{ type: 'num'}" />
                </div>
            </li>
            <li>
                <label>
                    邮件：
                </label>
                <div class="text">
                    <input type="text" class="formValidate" data-cfg="{ type: 'email', initMsg: '请输入邮箱地址！'}" />
                </div>
            </li>
            <li>
                <label>
                    手机：
                </label>
                <div class="text">
                    <input type="text" class="formValidate" data-cfg="{ type: 'phone', initMsg: '请请输入手机号码！'}" />
                </div>
            </li>
            <li>
                <label>
                    QQ：
                </label>
                <div class="text">
                    <input type="text" class="formValidate" data-cfg="{ regexObj: /^[1-9]*[1-9][0-9]*$/, initMsg: '请请输入手机号码！'}" />
                </div>
            </li>
            <li>
                <label>
                    年龄要求（18-25）：
                </label>
                <div class="text">
                    <input type="text" class="formValidate" data-cfg="{ rangeObj: 'num|18|25', initMsg: '请输入您的年龄'}" />
                </div>
            </li>
            <li>
                <label>
                    用户名：
                </label>
                <div class="text">
                    <input type="text" class="formValidate" />(ajax类型测试)
                </div>
            </li>
            <li>
                <label>
                    密码：
                </label>
                <div class="text">
                    <input type="text" id="pwd" class="formValidate" data-cfg="{ requred: true, type: 'password', msgPosition: 'right', initMsg: '请输入密码！', sucMsg: '正确', errorMsg: '格式错误'}" />
                </div>
            </li>
            <li>
                <label>
                    重复密码：
                </label>
                <div class="text">
                    <input type="text" id="rePwd" class="formValidate" data-cfg="{ compareObj: 'str|pwd|=', requred: true}" />（验证对比时，应该考虑日期，字符串，数字）
                </div>
            </li>
            <li>
                <label>
                    工作年限/薪水范围：
                </label>
                <div class="text">
                    <input type="text" id="d_start" class="formValidate" data-cfg="{ type: 'num', msgPosition: 'bottom'  }" />-
                    <input type="text" id="d_end" class="formValidate" data-cfg="{ compareObj: 'num|d_start|>',  type: 'num', msgPosition: 'bottom' }" />
                </div>
            </li>
            <li>
            <br />
            <br />
                <label>
                    学历：
                </label>
                <div class="text">
                    <select id="sec" class="formValidate" data-cfg="{ requred: true, initMsg: '请选择学历！', sucMsg: '正确', errorMsg: '必须选择学历' }">
                        <option value="" selected="selected">请选择</option>
                        <option value="1">专科</option>
                        <option value="2">本科</option>
                        <option value="3">硕士</option>
                    </select>
                </div>
            </li>
        </ul>
        <input type="button" value="提交" id="bt" />
    </div>
</body>
</html>
 
View Code