(转) 正题：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修改。

修改地方：
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--&gt;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 + "&lt;br /&gt;";                                   $.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 &lt; 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--&gt;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 + "&lt;br /&gt;";                                $.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 &lt; 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&lt;String, Object&gt; validateAjaxUser(               @RequestParam("customAjaxRule") String customAjaxRule,               @RequestParam("validateId") String validateId,               @RequestParam("validateValue") String validateValue) {           logger.info("validateAjaxUser");           Map&lt;String, Object&gt; map = new HashMap&lt;String, Object&gt;();           // 验证用户名是否等于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")@ResponseBodypublic Map&lt;String, Object&gt; validateAjaxUser(@RequestParam("customAjaxRule") String customAjaxRule,@RequestParam("validateId") String validateId,@RequestParam("validateValue") String validateValue) {logger.info("validateAjaxUser");Map&lt;String, Object&gt; map = new HashMap&lt;String, Object&gt;();// 验证用户名是否等于javaeyeif ("javaeye".equals(validateValue)) {// 是否通过map.put("ajaxisError", true);} else {map.put("ajaxisError", false);}// 验证规则的名称map.put("customAjaxRule", customAjaxRule);// 验证值的IDmap.put("validateId", validateId);return map;}

其他的修改请看附件源码；如果还有什么bug的，欢迎大家提出，继续完善这个验证框架。

(转) 正题：Jquery form validate验证

热点推荐