尝试写的input验证插件

HTML:

<div class="inputBox">
    <span>地址： </span>
    <input class="test" type="text" max="10" min="5" placeholder="请输入地址" reg="chinese">
</div>

CSS:

.inputBox{
  position: relative;
}
.inputErr{
  position: absolute;
  color: red;
  font-size: 24px;
  z-index: 30;
  bottom: -30px;
  right: 0;
}
.testErr{
  border-color: red !important;
}

JS:

;function Submit(cs) {
    this.name = ''
    var _this = this;

    //初始进入
    this.init= function(cs) {
        _this.name = cs;
        //没有执行过change事件就表明用户没有填写信息
        window[_this.name].swith = false;
        if ($('#' + cs).length > 0) {
            var cs = $('#' + cs);
            //绑定change事件
            $(cs).find('.test').each(function(i, n){
                _this.change($(n));
            });
            //绑定提交按钮事件
            _this.bind(cs);
        }else{
            console.error('没有找到验证ID');
        }
    }

    //正则枚举
    this.REG = {
        phone: [/^[1][3,4,5,7,8][0-9]{9}$/, '请输入正确的手机号'],
        chinese: [/^[\u4e00-\u9fa5]+$/, '请输入中文'],
        trim: [/(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}/, '内容不能小于六位的数字+字母']
    }

    //提交按钮绑定事件
    this.bind= function(cs){
        $(cs).find('.submit').click(function(){
            if(window[_this.name].swith && $(cs).find('.testErr').length <= 0 && $(cs).find('.test').length == $(cs).find('.changed').length){
                alert('信息没有问题')
            }else{
                $(cs).find('.test').each(function(i, n){
                    var val = $(n).val();
                    var reg = _this.REG[$(n).attr('reg')][0];
                    _this.test(val, reg, $(n));
                });
                alert('信息不完全')
            }
        });
    }

    //绑定change事件
    this.change= function(n){
        $(n).change(function(){
            window[_this.name].swith = true;
            var cs = $(n).attr('id');
            $(n).addClass('changed');
            //判断是否有正则
            if(_this.REG[$(n).attr('reg')]){
                if(_this.REG[$(n).attr('reg')].indexOf(',') > 0){
                    //多正则情况的判断
                }else{
                    var val = $(n).val();
                    var reg = _this.REG[$(n).attr('reg')][0];
                    _this.test(val, reg, $(n));
                }
            }else{  //没有写正则
                console.error('没有填写正则');
            }
        });
    }

    //判断是否通过正则
    this.test= function(val, reg, n){
        if (reg.test(val)) {
            //过了正则
            _this.length(n);
        } else {
            //没过正则
            _this.err(n);
        }
    }

    //字符串长度的判断
    this.length = function(n){
        if($(n).attr('max')){
            var l = $(n).attr('max');
            if($(n).val().trim().length > l){
                _this.lengthErr(n, l, 'max');
                return
            }
        }
        if($(n).attr('min')){
            var l = $(n).attr('min');
            if($(n).val().trim().length < l){
                _this.lengthErr(n, l, 'min');
                return
            }
        }
        this.tr(n);
    }

    //处理没有过长度的input
    this.lengthErr= function(n, l, str){
        var text =  '';
        str == 'min' ? text = '小于' : text = '大于';
        if($(n).siblings('.inputErr').length > 0){
            $(n).siblings('.inputErr').text('内容长度不能' + text + l + '位');
        }else{
            var s = $('<p class="inputErr">内容长度不能' + text + l + '</p>');
            $(n).addClass('testErr').parent().append(s);
        }
    }

    //处理没过正则的input
    this.err= function(n){
        if($(n).siblings('.inputErr').length > 0){
            $(n).siblings('.inputErr').text(_this.REG[$(n).attr("reg")][1]);
        }else{
            var s = $('<p class="inputErr">' + _this.REG[$(n).attr("reg")][1] + '</p>')
            $(n).addClass('testErr').parent().append(s);
        }
    }

    //处理过正则验证的input
    this.tr = function(n){
        $(n).removeClass('testErr').siblings('.inputErr').remove();
    }
}

结论：写的可真差劲呀