最近准备把公司开发的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验证代码！