? ? ? 在WEB项目开发中，前端的数据校验是必须的，在接触过以及实际应用jquery validate，prototype以及spring modules等一系列方式后，感觉用起来都有点麻烦，所以有了想封装jquery validate，让使用者更加方便。
? ? ? 此次基于jquery validate的封装，也参考了prototype的属性捆绑式校验。代码如下所示：
//文件validate.config.js，需要依赖jquery.validate.js, jquery.metadata.js
var validate;
function Validate(validator) {
this.validator = validator;
}
Validate.prototype = {
// 触发表单校验的事件，该方法会有返回值，如果有错误信息则返回false且弹出错误信息，否则返回为true，开发人员可以根据返回的错误信息来进行判断
validate : function() {
var result = this.validator.form();
return result;
},
// 重置表单对象
resetForm : function() {
this.validator.currentForm.reset();
},
// 提交表单对象
submitForm : function() {
this.validator.currentForm.submit();
}
}
$.valid = $.noop;
(function($) {
/**
* 给开发者提供可配置的validator的默认配置修改
*/
$.extend($.valid, {
showErrors : null, // 该方法主要用于给开发人员去指定自己的错误信息处理事件，该方法会回调错误信息数组
useKeyUpValidate : false, // 该属性标志是否按键盘上按键的时候触发校验事件，默认不触发。
useClickValidate : false, // 该属性标志是否单击表单对象的时候触发校验事件，默认不触发。
useFocusOutValidate : false, // 该属性标志表单对象失去焦点的时候触发校验事件，默认不触发。
useFocusInValidate : false, // 该属性标志表单对象得到焦点的时候触发校验事件，默认不触发。
useValidate : true, // 该属性用于主页面使用，标记是否初始化验证校验器
elementText : function(element) {
if (!(element instanceof $)) {
element = $(element);
}
if (element[0]) {
var key = element[0].name || element.attr('name') || "";
var label = $('label[for="' + key + '"],[for="' + key + '"]');
if (!label.length) {
var pe = element[0].parentElement;
var fe = $(pe).prev(pe.nodeName);
if (!fe.text()) {
fe = $(pe).prev();
}
label = fe.text() || element[0].name;
} else {
label = $(label[0]).text();
}
if (label.indexOf('*') > -1) {
return label.replace(/[\*]/g, '');
}
return label;
}
return '';
},
/** 用于页面重载时初始化校验器 */
init : function() {
this.useKeyUpValidate = false;
this.useClickValidate = false;
this.useFocusOutValidate = false;
this.useFocusInValidate = false;
this.showErrors = null;
},
// 检查表单下是否需要校验
checkForm : function(form) {
return true;
},
/** 构建验证校验器,支持重构 */
bindValidate : function(pid) {
var _this = this;
/** 判断默认验证方法是否被修改过 */
if (this.showErrors) {
$.validator.setDefaults({
showErrors : function(errorMap, errorList) {
$.valid.showErrors(errorList);
}
});
} else {
$.validator.setDefaults({
/**
* 修改validator默认的showErrors方法，错误提示信息以dialog来进行提示
*/
showErrors : function(errorMap, errorList) {
if (errorList.length) {
var msg = '';
if (errorList.length == 1) {
if (errorList[0].message.indexOf('{param}') > -1) {
msg += errorList[0].message.replace('{param}', $.valid.elementText(errorList[0].element));
} else {
msg += errorList[0].message;
}
} else {
for (i in errorList) {
if (errorList[i].message.indexOf('{param}') > -1) {
msg += (errorList[i].message.replace('{param}', $.valid.elementText(errorList[i].element)) + '<br/>'); } else {
msg += (errorList[i].message + '<br/>');
}
}
}
if (msg) {
// 调用弹出框对象显示错误信息（错误信息处理可自行扩展）
dialog.showDialog({value : msg, type : 'warn', focus : $(errorList[0].element)});
}
}
}
});
}
/** 判断默认验证方法是否被修改过 */
if (!this.useFocusInValidate) {
$.validator.setDefaults({
onfocusin : false
});
}
if (!this.useKeyUpValidate) {
$.validator.setDefaults({
onkeyup : false
});
}
if (!this.useClickValidate) {
$.validator.setDefaults({
onclick : false
});
}
if (!this.useFocusOutValidate) {
$.validator.setDefaults({
onfocusout : false
});
}
/** 获取容器中的form表单信息 */
var forms;
if (pid && $(pid).length) {
forms = $('form', pid);
} else {
forms = $('form');
}
/** 遍历所有的表单信息 */
if (forms.length) {
if (forms.length == 1) {
// 获取表单的验证对象
validate = this.buildValidator(forms[0]);
} else {
forms.each(function(i, form) {
var validator = _this.buildValidator(form);
if (validator) {
// 查看表单是否有id属性或者name属性，如果都没有则标注为当前的第几个form对象
var key = form.id || form.name || i;
validate[key] = validator;
}
});
if (validate.length == 1) {
validate = validate[0];
}
}
}
},
/** 构建校验器 */
buildValidator : function(form) {
// 获取form表单是否有文本域等表单元素增加了表单检验的规则
if (!this.checkForm(form)) {
return null;
}
var requireds = $('[required]', form);
if (requireds.length) {
requireds.removeAttr('required').addClass('required');
}
// 该form表单存在需要校验的表单信息，默认在表单提交的时候触发，如果用户对表单绑定了对应的提交事件则表单提交的时候不会触发验证事件，需要手动去触发
var onsubmit = true;
// 表单是否绑定了submit事件：即form.onsubmit = function 或
// onsumit='return formSubmit();'
if (form.onsubmit) {
onsubmit = false;
} else {
// 查看表单是否使用jquery的submit事件来进行绑定
var events = $(form).data('events');
if (events && events['submit']) {
onsubmit = false;
}
}
// 返回表单验证对象
return new Validate($(form).validate({
onsubmit : onsubmit
}));
}
});
})(jQuery);
jQuery.extend(jQuery.validator.messages, {
required: "{param} 为必填字段,不能为空!",
remote: "{param} 不符合要求,请修正该字段!",
email: "请输入正确格式的电子邮件!",
url: "{param} 不是合法的网址,请重新输入!",
date: "{param} 不是合法的日期,请重新输入!",
dateISO: "{param} 不是合法的日期 (ISO),请重新输入!",
number: "{param} 只能输入合法的数字,请重新输入!",
digits: "{param} 只能输入整数,请重新输入!",
creditcard: "{param} 不是合法的信用卡号,请重新输入!",
equalTo: "{param} 与 {0} 的值不同,请重新输入!",
accept: "{param} 后缀名不合法,请重新输入!",
mask: "{param} 格式不合法,请重新输入!",
lessthan: "{param} 不能大于 {0} 的值,请重新输入!",
lessthanminus: "{param} 不能大于 {0} - {1},请重新输入!",
morethan: "{param} 不能小于 {0} 的值,请重新输入!",
maxlength: $.validator.format("{param} 仅能输入 {0} 个字,请重新输入!"),
length: $.validator.format("{param} 有且只能输入 {0} 个字,请重新输入!"),
minlength: $.validator.format("{param} 至少输入 {0} 个字,请重新输入!"),
rangelength: $.validator.format("{param} 仅能输入长度介于 {0} 和 {1} 之间的字符串,请重新输入!"),
range: $.validator.format("{param} 仅介于 {0} 和 {1} 之间的值,请重新输入!"),
max: $.validator.format("{param} 的最大值为 {0},请重新输入!"),
min: $.validator.format("{param} 的最小值为 {0},请重新输入!")
});
$(function(){
if ($.valid.useValidate) {
$.valid.bindValidate();
}
});
? ?在页面上的元素属性绑定如下（属性即为jQuery.validator.messages中所有的key值）：
? ?
<tr>
<th><span class="ui-fontSty-red">*</span><label for="menuCode">菜单编号</label></th>
<td><input name="menuCode" required="required" maxlength="20" rule="codetype" type="text" class="ui-formInput2"/></td>
<th><span class="ui-fontSty-red">*</span><label for="menuName">菜单名称</label></th>
<td><input name="menuName" required="required" maxlength="20" type="text" class="ui-formInput2"/></td>
</tr>
//我们需要将可编辑框的文本标识与可编辑框关联起来，即<label for="menuCode">菜单编号</label>所关联的是menuCode文本输入框。
? ? 在表单提交时，如果表单自身没有绑定submit事件，即会自动触发校验，否则我们需要手动调用validate.validate();?
? ??
$('form').submit(function(){
if (validate.validate()) {
alert('校验成功');
}
return false;
});
? ? ? 如果校验不通过，将会弹出错误信息。
? ? ? 这样，我们就无需在页面上写大量的javascript代码来做表单校验了。
? ? ? 源代码以及examples：