HTML之表单验证
最近准备把公司开发的CMS的表单添加中增加客户端的表单验证，之前一直是使用的ASP.NET自带的服务器验证控件，其用起来固然方便，但却无形中也给服务器带来了压力。
(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}$/
};
this.validatorArr = {};
};
FormValidator.prototype.init = function () {
var scope = this;
$('.formValidate').each(function () {
var el = $(this);
scope.initItem(el);
}); //each
};
FormValidator.prototype.initItem = function (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 || '请注意格式',
type = cfg.type || '',
requred = cfg.requred || false,
msgPosition = cfg.msgPosition || 'right';
cfg.id = id;
cfg.initMsg = initMsg;
cfg.sucMsg = sucMsg;
cfg.errorMsg = errorMsg;
cfg.type = type;
cfg.msgPosition = msgPosition;
cfg.requred = requred;
cfg.requredMsg = cfg.requredMsg || '该项必填';
if (check) {
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;
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);
});
cfg.validate = function () {
scope.funcValidate(el, cfg);
};
scope.validatorArr[id] = cfg; //生成相关验证对象
}
} else {
console.log('请输入完整验证信息！否则控件会产生错误！');
}
};
FormValidator.prototype.funcValidate = function (el, cfg) {
var id = cfg.id;
//取消事件不执行下面逻辑
if (!this.validatorArr[id])
return false;
var type = cfg.type;
var requred = cfg.requred;
if (!type && !this.regexEnum[type]) {
return false;
}
var isPass = 0; //0初始状态，1成功，-1错误
var msg = '';
var r = this.regexEnum[type] ? this.regexEnum[type] : type;
if (requred && el.val() == '') {
isPass = -1;
msg = cfg.requredMsg;
} else {
if (el.val() == '') {
isPass = 0;
msg = cfg.initMsg;
} else {
if (r.test(el.val())) {
isPass = 1;
msg = cfg.sucMsg;
} else {
isPass = -1;
msg = cfg.errorMsg;
}
}
}
if (isPass == 0) {
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>' + msg);
} 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
this.validatorArr[id].tipEl.remove(); //删除提示信息
delete this.validatorArr[id]; //删除该验证项目
// this.validatorArr[id].el.unbind();//移除所有事件，但是考虑标签可能会有其他事件，此处暂时不予处理
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; }
</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');
bt.click(function () {
var end = f.validatorState();
var s = '';
});
add.click(function () {
f.addValidator(name.val());
var s = '';
});
remove.click(function () {
f.removeValidator(name.val());
var s = '';
});
});
</script>
</head>
<body>
<input type="text" id="name" />
<input type="button" value="取消验证" id="remove" />
<input type="button" value="添加验证" id="add" />
<div class="form">
<div>
身份证：<input type="text" id="idCard" class="formValidate" data-cfg="{ check: 'true', type: 'idCard', msgPosition: 'right', initMsg: '请输入身份证号码！', requred: true, sucMsg: '正确', errorMsg: '格式错误'}" />
</div>
<div>
数字：<input type="text" id="num" class="formValidate" data-cfg="{ type: 'num', initMsg: '请输入数字', msgPosition: 'top'}" />
</div>
<div>
邮件：<input type="text" class="formValidate" data-cfg="{ type: 'email', initMsg: '请输入邮箱地址！'}" />
</div>
<div>
手机：<input type="text" class="formValidate" data-cfg="{ type: 'phone', initMsg: '请请输入手机号码！'}" />
</div>
<div>
QQ：<input type="text" class="formValidate" data-cfg="{ type: /^[1-9]*[1-9][0-9]*$/, initMsg: '请请输入手机号码！'}" />
</div>
<div>
用户名：<input type="text" />
</div>
<div>
密码：<input type="text" />
</div>
<div>
重复密码：<input type="text" />
</div>
<div>
性别：
<label>
<input type="radio" name="Gender" value="0" />
男</label>
<label>
<input type="radio" name="Gender" value="1" />
女</label>
</div>
<div>
爱好：
<label>
<input type="checkbox" name="aihao" value="0" />
爱好1</label>
<label>
<input type="checkbox" name="aihao" value="1" />
爱好2</label>
<label>
<input type="checkbox" name="aihao" value="0" />
爱好3</label>
<label>
<input type="checkbox" name="aihao" value="1" />
爱好4</label>
</div>
<input type="button" value="提交" id="bt" />
</div>
</body>
</html>
View Code
这个demo中涉及到了挺多js验证代码！