最近在项目中要用到验证,所以重新看了下jquery的一个验证框架。
作者已经更新到1.7 [b]官方网站:[/b][url=http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/]A jQuery inline form validation, because validation is a mess[/url]
此版本是在[b]bluespring+官方1.7[/b]的基础上修改的。感谢[b][url=http://bluespring.iteye.com/]bluespring[/url][/b]。
[b]bluespring[/b]:原帖:[url=http://www.iteye.com/topic/658779]配置超简单的Jquery form validate验证框架(修改与扩展)[/url]
[color=red]0.2版本小小的bug修改。[/color]
[size=small]修改地方:[/size]
[b] 一、[/b] 原作者的代码会出现这种情况,前提是要开起bluespring的鼠标悬停提示(showOnMouseOver为true)。不开起悬停提示不会出现这种情况。
发现是因为作者的设置div的padding,改为margin就不会有问题。祥见图片:
[img]http://matychen.iteye.com/upload/picture/pic/68542/a629de03-d8a7-3cc4-aa1b-1731cfdcc4ec.jpg[/img]
[img]http://matychen.iteye.com/upload/picture/pic/68540/3498cf6d-44da-38ac-94e4-3883eeb1a841.jpg[/img]
[b] 二、[/b] 当然在ie6下面会出现select遮挡div的情况,只要在div里面加个iframe就可以了:
没修改前:
[img]http://matychen.iteye.com/upload/picture/pic/68544/7959b595-92a8-351d-8a1b-bf790cba64b4.jpg[/img]
修改后:
[img]http://matychen.iteye.com/upload/picture/pic/68546/8c674757-3b57-33db-9b3d-f548f55098c8.jpg[/img]
三、增加验证规则存放的属性名称
可以不用定义规则在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的提交参数,和返回参数
在服务端的代码只要这样就可以了:
[color=darkred]其他的修改请看附件源码[/color];如果还有什么bug的,欢迎大家提出,继续完善这个验证框架。
作者已经更新到1.7 [b]官方网站:[/b][url=http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/]A jQuery inline form validation, because validation is a mess[/url]
此版本是在[b]bluespring+官方1.7[/b]的基础上修改的。感谢[b][url=http://bluespring.iteye.com/]bluespring[/url][/b]。
[b]bluespring[/b]:原帖:[url=http://www.iteye.com/topic/658779]配置超简单的Jquery form validate验证框架(修改与扩展)[/url]
[color=red]0.2版本小小的bug修改。[/color]
[size=small]修改地方:[/size]
/** 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
*/
[b] 一、[/b] 原作者的代码会出现这种情况,前提是要开起bluespring的鼠标悬停提示(showOnMouseOver为true)。不开起悬停提示不会出现这种情况。
发现是因为作者的设置div的padding,改为margin就不会有问题。祥见图片:
[img]http://matychen.iteye.com/upload/picture/pic/68542/a629de03-d8a7-3cc4-aa1b-1731cfdcc4ec.jpg[/img]
[img]http://matychen.iteye.com/upload/picture/pic/68540/3498cf6d-44da-38ac-94e4-3883eeb1a841.jpg[/img]
[b] 二、[/b] 当然在ie6下面会出现select遮挡div的情况,只要在div里面加个iframe就可以了:
没修改前:
[img]http://matychen.iteye.com/upload/picture/pic/68544/7959b595-92a8-351d-8a1b-bf790cba64b4.jpg[/img]
修改后:
[img]http://matychen.iteye.com/upload/picture/pic/68546/8c674757-3b57-33db-9b3d-f548f55098c8.jpg[/img]
三、增加验证规则存放的属性名称
可以不用定义规则在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;
}
[color=darkred]其他的修改请看附件源码[/color];如果还有什么bug的,欢迎大家提出,继续完善这个验证框架。