精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-08-02
最后修改:2010-08-03
作者已经更新到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的,欢迎大家提出,继续完善这个验证框架。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-08-04
每个人完善都是从头做起。。。在这个板块都看到2个人完善这东西了...
|
|
返回顶楼 | |
发表时间:2010-08-04
Angel_Night 写道 每个人完善都是从头做起。。。在这个板块都看到2个人完善这东西了...
显然我是在别人的基础上改的 |
|
返回顶楼 | |
发表时间:2010-08-14
/commons/validate/jquery.bgiframe.js
这个js缺少。。。楼主是不是防进去 |
|
返回顶楼 | |
发表时间:2010-08-15
jtyb 写道 /commons/validate/jquery.bgiframe.js
这个js缺少。。。楼主是不是防进去 没有,那个开始是想修补在ie6下面select遮挡div的bug,不过后来自己实现了,就没有要了。 |
|
返回顶楼 | |
发表时间:2010-08-15
感谢楼主的分享
|
|
返回顶楼 | |
发表时间:2010-09-28
我也在用,很不错。
|
|
返回顶楼 | |
发表时间: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 或者在线指导下, 在此万分感谢楼主 |
|
返回顶楼 | |
发表时间:2010-10-04
zxingdream 写道 楼主matychen好,
是这样的 首先我不是J2EE学者,以前做验证用的是formvalidtor,但需要占一定的页面空间,偶然发现了........... 把你用的,和你写的例子打包,发站内信给我。 |
|
返回顶楼 | |
发表时间: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?"男":"女") } 这种来做 楼主知道怎么整合进去吗? 楼主 继续支持你啊,帮我们想想解决方案 或者 给个思路 这个我已经融合进去了,但错误信息不能显示我们函数里面的,除非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] 但这样虽然可以用了 但是提示信息就固定了,呵呵 有待继续研究 |
|
返回顶楼 | |