Jquery form validate印证框架(修改与扩展)二
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修改。
修改地方:
一、 原作者的代码会出现这种情况,前提是要开起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的提交参数,和返回参数
在服务端的代码只要这样就可以了:
其他的修改请看附件源码;如果还有什么bug的,欢迎大家提出,继续完善这个验证框架。
显然我是在别人的基础上改的
没有,那个开始是想修补在ie6下面select遮挡div的bug,不过后来自己实现了,就没有要了。
把你用的,和你写的例子打包,发站内信给我。
楼主 继续支持你啊,帮我们想想解决方案 或者 给个思路
这个我已经融合进去了,但错误信息不能显示我们函数里面的,除非alert();
在jquery.validationEngine-cn.js里找到$.validationEngineLanguage.allRules = {新添加代码:
"chkIDCard" :{
"nname" : "chkIDCard","alertText" : "* 请输入正确的身份证号."}
然后添加函数
function chkIDCard(){
var card=cidInfo(document.getElementById("idcard").value);
if(card!=true) return false;
else return true;
}
调用的时候在class里这样调用:funcCall[chkIDCard]
但这样虽然可以用了 但是提示信息就固定了,呵呵 有待继续研究
你看看你传值是否标准,用firebug跟一下
最近在项目中要用到验证,所以重新看了下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的,欢迎大家提出,继续完善这个验证框架。
1 楼
旭少版
2010-08-03
支持一下~
我也在用这个
我也在用这个
2 楼
Angel_Night
2010-08-04
每个人完善都是从头做起。。。在这个板块都看到2个人完善这东西了...
3 楼
matychen
2010-08-04
Angel_Night 写道
每个人完善都是从头做起。。。在这个板块都看到2个人完善这东西了...
显然我是在别人的基础上改的
4 楼
jtyb
2010-08-14
/commons/validate/jquery.bgiframe.js
这个js缺少。。。楼主是不是防进去
这个js缺少。。。楼主是不是防进去
5 楼
matychen
2010-08-15
jtyb 写道
/commons/validate/jquery.bgiframe.js
这个js缺少。。。楼主是不是防进去
这个js缺少。。。楼主是不是防进去
没有,那个开始是想修补在ie6下面select遮挡div的bug,不过后来自己实现了,就没有要了。
6 楼
jtyb
2010-08-15
感谢楼主的分享
7 楼
心有余闲
2010-09-28
我也在用,很不错。
8 楼
zxingdream
2010-10-04
楼主matychen好,
是这样的 首先我不是J2EE学者,以前做验证用的是formvalidtor,但需要占一定的页面空间,偶然发现了formValidation插件,参照您的教程,简单会用了,
但关于ajaxuser 验证用户名异步调用这块 我还没测试成功, 研究了好久,都没发现突破点 发现您是用json框架提交json数据的, 但是 我现在不用json框架,怎么去提交?
直接request吗?
还有,我在 if (!ajaxisError) {$.ajax({
-------- 新加入测试----
alert( "validateValue=" + fieldValue + "&validateId=" + fieldId + "&customAjaxRule=" + customAjaxRule + "&extraData=" + extraData);
if (!customAjaxRule) {){--------}
-----代码片段-----
}}
然后 弹出的对话框:
validateValue= + 文本框内容(得到值)validateId=undefined& customAjaxRule=undefined &extraData=
我有两个问题:1,前台input数据都得到了,为什么validateId和customAjaxRule都是undfined? 难道数据没提交吗?
2,后台返回数据前台怎么处理?
3,日期验证好像没一直没通过,输入正确也不会消失
详情请看图片
还有 我下载的是
jquery_validate.rar (43.9 KB) 在这个版本下做的测试
jquery_validate-0.2.rar (44 KB)
希望楼主能给一个关于asp的demo 或者 jsp不用json框架 的demo 或者在线指导下,
在此万分感谢楼主
是这样的 首先我不是J2EE学者,以前做验证用的是formvalidtor,但需要占一定的页面空间,偶然发现了formValidation插件,参照您的教程,简单会用了,
但关于ajaxuser 验证用户名异步调用这块 我还没测试成功, 研究了好久,都没发现突破点 发现您是用json框架提交json数据的, 但是 我现在不用json框架,怎么去提交?
直接request吗?
还有,我在 if (!ajaxisError) {$.ajax({
-------- 新加入测试----
alert( "validateValue=" + fieldValue + "&validateId=" + fieldId + "&customAjaxRule=" + customAjaxRule + "&extraData=" + extraData);
if (!customAjaxRule) {){--------}
-----代码片段-----
}}
然后 弹出的对话框:
validateValue= + 文本框内容(得到值)validateId=undefined& customAjaxRule=undefined &extraData=
我有两个问题:1,前台input数据都得到了,为什么validateId和customAjaxRule都是undfined? 难道数据没提交吗?
2,后台返回数据前台怎么处理?
3,日期验证好像没一直没通过,输入正确也不会消失
详情请看图片
还有 我下载的是
jquery_validate.rar (43.9 KB) 在这个版本下做的测试
jquery_validate-0.2.rar (44 KB)
希望楼主能给一个关于asp的demo 或者 jsp不用json框架 的demo 或者在线指导下,
在此万分感谢楼主
9 楼
matychen
2010-10-04
zxingdream 写道
楼主matychen好,
是这样的 首先我不是J2EE学者,以前做验证用的是formvalidtor,但需要占一定的页面空间,偶然发现了...........
是这样的 首先我不是J2EE学者,以前做验证用的是formvalidtor,但需要占一定的页面空间,偶然发现了...........
把你用的,和你写的例子打包,发站内信给我。
10 楼
zxingdream
2010-10-05
zxingdream 写道
wafj999 写道
验证身份证的规则怎么整合进去啊?之前的都是"regex":"/^[a-zA-Z\u4E00-\u9FA5]+[a-zA-Z0-9_\u4E00-\u9FA5]+$/",
这样就可以但是身份证的校验必须通过
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
//身份证正则表达式(18位)
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
地区、性别和身份证进行判断的正则表达式:
<script>
var
aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"
安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州"
,53:"云南",54:"*",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"*",71:"*",81:"香港",82:"澳门",91:"国外"}
function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}
这种来做
楼主知道怎么整合进去吗?
这样就可以但是身份证的校验必须通过
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
//身份证正则表达式(18位)
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
地区、性别和身份证进行判断的正则表达式:
<script>
var
aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"
安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州"
,53:"云南",54:"*",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"*",71:"*",81:"香港",82:"澳门",91:"国外"}
function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}
这种来做
楼主知道怎么整合进去吗?
楼主 继续支持你啊,帮我们想想解决方案 或者 给个思路
这个我已经融合进去了,但错误信息不能显示我们函数里面的,除非alert();
在jquery.validationEngine-cn.js里找到$.validationEngineLanguage.allRules = {新添加代码:
"chkIDCard" :{
"nname" : "chkIDCard","alertText" : "* 请输入正确的身份证号."}
然后添加函数
function chkIDCard(){
var card=cidInfo(document.getElementById("idcard").value);
if(card!=true) return false;
else return true;
}
调用的时候在class里这样调用:funcCall[chkIDCard]
但这样虽然可以用了 但是提示信息就固定了,呵呵 有待继续研究
11 楼
btdf007
2010-12-10
发现了一个bug 在使用ajax验证的时候 如果该项没有失去焦点而是直接按回车提交 不会触发ajax验证
12 楼
maike
2010-12-17
非常感谢。正想用这个
13 楼
chenleijiangjun
2011-03-03
showOnMouseOver: true,好像不起作用啊!能不能做到验证错误先把文本框的边框变红,然后鼠标浮上去在提示错误信息呢?谢谢!
14 楼
chenleijiangjun
2011-03-24
楼主帮忙:ajax验证后错误提示信息位置不对,而且ajax验证错误后表单也能提交。请楼主帮忙,万分感谢!
15 楼
cao_jj
2011-11-19
页面显示这个:customAjaxRule没有返回值, 请检查. 可是明明已经传了。alert的时候说undefined
16 楼
matychen
2011-11-19
cao_jj 写道
页面显示这个:customAjaxRule没有返回值, 请检查. 可是明明已经传了。alert的时候说undefined
你看看你传值是否标准,用firebug跟一下