(转) 主题：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-->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的，欢迎大家提出，继续完善这个验证框架。