主题：Jquery form validate验证框架（修改与扩展）二
最近在项目中要用到验证，所以重新看了下jquery的一个验证框架。
作者已经更新到1.7 官方网站：A jQuery inline form validation, because validation is a mess
此版本是在bluespring+官方1.7的基础上修改的。感谢bluespring。
bluespring：原帖：配置超简单的Jquery form validate验证框架（修改与扩展）
0.2版本小小的bug修改。
修改地方：
Xml代码
/** 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
*/
/** 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的提交参数，和返回参数
Js代码
在服务端的代码只要这样就可以了：
Java代码
其他的修改请看附件源码；如果还有什么bug的，欢迎大家提出，继续完善这个验证框架。
作者已经更新到1.7 官方网站：A jQuery inline form validation, because validation is a mess
此版本是在bluespring+官方1.7的基础上修改的。感谢bluespring。
bluespring：原帖：配置超简单的Jquery form validate验证框架（修改与扩展）
0.2版本小小的bug修改。
修改地方：
Xml代码
/** 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
*/
/** 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的提交参数，和返回参数
Js代码
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;
}
}
}
}
});
}
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;
}
}
}
}
});
}
在服务端的代码只要这样就可以了：
Java代码
/**
* 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;
}
/**
* 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的，欢迎大家提出，继续完善这个验证框架。