最近在项目中要用到验证，所以重新看了下jquery的一个验证框架。
作者已经更新到1.7
官方网站：A jQuery inline form validation, because validation is a mess
此版本是在
bluespring+官方1.7的基础上修改的。感谢
bluespring。
bluespring：原帖：
配置超简单的Jquery form validate验证框架（修改与扩展）
0.2版本小小的bug修改。
修改地方：
/** Inline Form Validation Engine 1.7, jQuery plugin
*
* Copyright(c) 2010, Cedric Dugas
* http://www.position-relative.net
*
* Form validation engine allowing custom regex rules to be added.
* Thanks to Francois Duquette and Teddy Limousin
* and everyone helping me find bugs on the forum
* Licenced under the MIT Licence
*
* bluespring 修改1.6.4.1
* 1.提供选项定制是否关闭提示框箭头 showArray
* 2.提供选项定制提示框是否在鼠标放上去的时刻出现还是一直出现 showOnMouseOver
* 3.提供选项定制input 效验错误样式
*
* Quentin 修改
* 1. 无法全部去掉红色边框的bug
*
* matychen 修改
* 1.把css 中的errorform的padding-bottom改为margin-bottom ，如果不改，在checkbox的时候会遮挡。
* 2.当showOnMouseOver为true时。增加处理checkbox时，下面被占用，自己减少了top的高度，如果不减少top的高度，在checkbox的时候会遮挡。
* 3.修复了ie6的select遮挡div的bug
* 4.增加验证规则存放的属性名称
* 5.修改了ajax的发送到客户端的参数名称，返回值不用数组，直接用json对象。
* 验证规则的名称validateError-->customAjaxRule
*/
一、 原作者的代码会出现这种情况，前提是要开起bluespring的鼠标悬停提示（showOnMouseOver为true）。不开起悬停提示不会出现这种情况。
发现是因为作者的设置div的padding，改为margin就不会有问题。祥见图片：
二、 当然在ie6下面会出现select遮挡div的情况，只要在div里面加个iframe就可以了：
没修改前：
修改后：
三、增加验证规则存放的属性名称
可以不用定义规则在class里面，自己写个属性也可以：$("#formID").validationEngine({validateAttribute: "validate"});
在input里面：<input value="" validate="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />
四、修改了ajax的提交参数，和返回参数
if (!ajaxisError) {
$.ajax({
type: "POST",
url: postfile,
//async: true,//要验证的值 验证值的名称 验证规则的名称validateError-->customAjaxRule
data: "validateValue=" + fieldValue + "&validateId=" + fieldId + "&customAjaxRule=" + customAjaxRule + "&extraData=" + extraData,
beforeSend: function () { // BUILD A LOADING PROMPT IF LOAD TEXT EXIST
if ($.validationEngine.settings.allrules[customAjaxRule].alertTextLoad) {
if (!$("div." + fieldId + "formError")[0]) {
return $.validationEngine.buildPrompt(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, "load");
} else {
$.validationEngine.updatePromptText(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, "load");
}
}
}, error: function (data, transport) {
$.validationEngine.debug("Ajax 错误: " + data.status + " " + transport);
}, success: function (data) { // GET SUCCESS DATA RETURN JSON
// jquery 已经转为json了，所以不要这句话，不然会报：missing ] after element list的错误
// data = eval("(" + data + ")"); // GET JSON DATA FROM PHP AND PARSE IT
// add by matychen 不用数组，直接用json对象。例如：{"validateId":"user","ajaxisError":false,"customAjaxRule":"ajaxUser"}
ajaxisError = data.ajaxisError; //true or false
customAjaxRule = data.customAjaxRule; //验证规则的名称
ajaxCaller = $("#" + data.validateId)[0]; //验证值的id
//
fieldId = ajaxCaller;
ajaxErrorLength = $.validationEngine.ajaxValidArray.length;
existInarray = false;
//对象就不能是"false"了
if (ajaxisError == false) { // DATA FALSE UPDATE PROMPT WITH ERROR;
_checkInArray(false); // Check if ajax validation alreay used on this field
if (!existInarray) { // Add ajax error to stop submit
$.validationEngine.ajaxValidArray[ajaxErrorLength] = new Array(2);
$.validationEngine.ajaxValidArray[ajaxErrorLength][0] = fieldId;
$.validationEngine.ajaxValidArray[ajaxErrorLength][1] = false;
existInarray = false;
}
$.validationEngine.ajaxValid = false;
promptText += $.validationEngine.settings.allrules[customAjaxRule].alertText + "<br />";
$.validationEngine.updatePromptText(ajaxCaller, promptText, "", true);
} else {
_checkInArray(true);
$.validationEngine.ajaxValid = true;
if (!customAjaxRule) {
$.validationEngine.debug("customAjaxRule没有返回值, 请检查. ");
}
if ($.validationEngine.settings.allrules[customAjaxRule].alertTextOk) { // NO OK TEXT MEAN CLOSE PROMPT
$.validationEngine.updatePromptText(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextOk, "pass", true);
} else {
ajaxValidate = false;
$.validationEngine.closePrompt(ajaxCaller);
}
}
function _checkInArray(validate) {
for (x = 0; x < ajaxErrorLength; x++) {
if ($.validationEngine.ajaxValidArray[x][0] == fieldId) {
$.validationEngine.ajaxValidArray[x][1] = validate;
existInarray = true;
}
}
}
}
});
}
在服务端的代码只要这样就可以了：
/**
* Ajax验证用户名
*
* @param customAjaxRule
* 验证规则名称
* @param validateId
* 验证值的ID
* @param validateValue
* 验证值
* @return
*/
@RequestMapping(value = "/validateAjaxUser")
@ResponseBody
public Map<String, Object> validateAjaxUser(
@RequestParam("customAjaxRule") String customAjaxRule,
@RequestParam("validateId") String validateId,
@RequestParam("validateValue") String validateValue) {
logger.info("validateAjaxUser");
Map<String, Object> map = new HashMap<String, Object>();
// 验证用户名是否等于javaeye
if ("javaeye".equals(validateValue)) {
// 是否通过
map.put("ajaxisError", true);
} else {
map.put("ajaxisError", false);
}
// 验证规则的名称
map.put("customAjaxRule", customAjaxRule);
// 验证值的ID
map.put("validateId", validateId);
return map;
}
其他的修改请看附件源码；如果还有什么bug的，欢迎大家提出，继续完善这个验证框架。
分享到：
相关推荐
jquery-validate 可对前端form进行表单校验，文档里详细介绍了如何使用jquery-validate框架和如何扩展验证方法。
很好用的页面验证框架，对页面表单数据验证及提示很方便！
JQuery的validate验证框架.完整的验证项目，在eclipse+tomcat7.0环境下运行！！
jquery-validate验证框架使用详解及JS文件
jQuery.validate验证，很全面的文档。
Jquery validate和form两个插件，完美进行表单验证和Ajax无刷新方式提交form表单，很有用的哦。
jquery表单验证框架：jquery.validate.zip 附：中文API 文档
jQuery验证框架jquery.validate.js说明文档 手册
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jquery.validate表单验证框架详解.
非常好的Jquery validate：每个案例独立,都有注释 讲解了： 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果
jquery-validate前台验证框架,带详细使用方法。共同进步共同研究学习
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 （一）、可选项( options ) 1 （二）插件方法 (jQuery validation) 6 （三、四）选择器及实用工具 (jQuery validation) 7 四、实用工具...
自做的一个简单的表单验证 jquery validate 表单验证 jquery validate 表单验证
jQuery validate 验证 个性化验证
jquery.validate Validation .js验证框架 帮助 手册 文档.doc （一）、可选项( options ) 1 （二）插件方法 (jQuery validation) 6 （三、四）选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 ...
这个jQuery插件使简单的客户端的表单验证轻松快速，同时提供大量的选择定制。是一个很好的选择，当你试图把它集成到一个现有的应用程序的现有标记。插件捆绑了一套有用的验证方法，包括URL和电子邮件验证
jquery-validate 验证插件
只验证格式，不验证有效性。 7 number:true 必须输入合法的数字（负数，小数）。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept...