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();
}
}
结论:写的可真差劲呀