validationEngine v2.0 结合struts2 ajax验证

validationEngine v2.0进行了重写，变化很大。

 

首先说一下整个表单验证，使用简单的一行代码就能完成：

$("#form.id").validationEngine('validate');

这是我之前用的验证代码：

var success=true;

$(formid+" :text,"+formid+" select,"+formid+" textarea").each(function(i,input){
  if($.validationEngine.loadValidation("#"+$(input).attr('id'))){
   success=false;

  }
});

是挨个验证的，当然现在也可以挨个验证：

$("#form.id").validationEngine('validateField', "比如一个INPUT的ID");

 

 

下面是自己使用AJAX验证的一点经验：

 

1.和旧版本一样，也是在域的class属性中添加ajax[XXXX],XXXX是自定义的验证规则。

2.规则与旧版本就有区别了：

"ajaxUserCall": {
    "url": "ajaxValidateFieldUser",
    "extraData": "name=eric",
    "extraDataDynamic": ['#user_id', '#user_email'],
    "alertText": "* This user is already taken",
    "alertTextOk": "All good!",
    "alertTextLoad": "* Validating, please wait"
}

• url - 这个都懂
• extraData - 可选的传递参数
• extraDataDynamic - 可选 DOM id's，其value属性会作为参数传递
• alertText - 验证错误提示信息
• alertTextOk - 验证成功提示信息（绿色）
• alertTextLoad - 验证提交过程中的提示信息

3.接下来这部分是我修改的两处validationEngine源代码，因为我认为这部分不适合使用struts2。

if (!options.isError) {
            	alert(extraDataDynamic);
                $.ajax({
                    type: "GET",
                    url: rule.url,
                    cache: false,
                    dataType: "json",
                    data: "fieldId=" + field.attr("id") + "&fieldValue=" + field.val() + "&extraData=" + extraData + "&" + extraDataDynamic,
                    field: field,
                    rule: rule,
                    methods: methods,
                    options: options,
                    beforeSend: function() {
                        // build the loading prompt
                        var loadingText = rule.alertTextLoad;
                        if (loadingText)
                            methods._showPrompt(field, loadingText, "load", true, options);
                    },
                    error: function(data, transport) {
                        methods._ajaxError(data, transport);
                    },
                    success: function(json) {
                        // asynchronously called on success, data is the json answer from the server
                        var errorFieldId = json.validateReturn[0];
                        var errorField = $($("#" + errorFieldId)[0]);
                        
                        // make sure we found the element
                        if (errorField.length == 1) {
                            var status = json.validateReturn[1];
							// read the optional msg from the server
							var msg = json.validateReturn[2];
                            if (!status) {
                                // Houston we got a problem - display an red prompt
                                options.ajaxValidCache[errorFieldId] = false;
                                options.isError = true;

								// resolve the msg prompt
								if(msg) {
									if (options.allrules[msg]) {
                                    	var txt = options.allrules[msg].alertText;
                                    	if (txt)
                                    		msg = txt;
                                    }
								}
								else
                                    msg = rule.alertText;
                                
								methods._showPrompt(errorField, msg, "", true, options);
                            } else {
                                if (options.ajaxValidCache[errorFieldId] !== undefined)
                                    options.ajaxValidCache[errorFieldId] = true;

                                // resolves the msg prompt
								if(msg) {
									if (options.allrules[msg]) {
							           	var txt = options.allrules[msg].alertTextOk;
							           	if (txt)
							           		msg = txt;
							        }
								}
								else
							       	msg = rule.alertTextOk;                                

								// see if we should display a green prompt
                                if (msg)
                                    methods._showPrompt(errorField, msg, "pass", true, options);
                                else
                                    methods._closePrompt(errorField);
                            }
                        }
                    }
                });
            }

 注意红字部分，根据文档描述，需要返回的JSON数据应该形如:

Client receives <== ["id1", boolean, errorMsg] Server

• 域的ID
• 验证状态，成功或者失败
• 可选的验证提示信息. 如果不写则使用规则中定义的提示信息
  

我在struts2中使用的是struts2-json-plugin-2.1.8.jar(struts2代码在后面)，返回的属性是Object[] validateReturn, 所以这里接收到的JSON数据应该我改成了json.validateReturn.

 

if (extraDataDynamic) {
              var tmpData = [];
              var domIds = String(extraDataDynamic).split(",");
              for (var i = 0; i < domIds.length; i++) {
                var id = domIds[i];
                if ($(id).length) {
                  var inputValue = field.closest("form").find(id).val();
                  var keyValue = $(id).attr("name") + '=' + escape(inputValue);
                  tmpData.push(keyValue);
                }
              }

 此处源代码是在直接使用extraDataDynamic中填写的域把"#"换成"&"就附在URL后面作为参数了，在域中如果和我一样name属性和id属性不一致，则修改此处为红色字体。

 

4.这部分是action中的代码

private Object[] validateReturn = new Object[3];
private HttpServletRequest request;
	
@Action(results = {@Result(type="json", params = { "excludeProperties", "inputStream,resultStatus,expertiseVo,expertiseVos"})}, value="validateExpertiseTypeNo")
      public String validateExpertiseTypeNo(){
		String validateId = request.getParameter("fieldId");// 获取验证的域
		String validateValue = request.getParameter("fieldValue"); //获取域的value属性
		int valiValue = Integer.parseInt(validateValue);//我使用的int型，在class里还有验证规则 onlyNumber
		if(expertiseVo.getExpertiseType() == 0){//我需要在验证规则中添加其他域的值
			validateReturn[0] = validateId;//这里是返回的提示信息数组
			validateReturn[1] = false;
			validateReturn[2] = "未指定类型";
		}else if(expertiseVo.getExpertiseType() != 0){
			expertiseVo = expertiseService.findExpertiseByNo(expertiseVo.getExpertiseType(), valiValue);
				if(expertiseVo.getId() == null){
					validateReturn[0] = validateId;
					validateReturn[1] = true;
					validateReturn[2] = "可以使用";
				}else if(expertiseVo.getId().length > 0){
					validateReturn[0] = validateId;
					validateReturn[1] = false;
					validateReturn[2] = "在指定类型已经存在";
				}
		}
		return SUCCESS;
	}

 

以上是我由v2.0替换旧的v1.6在使用ajax验证上的一点心得，因为新版本中ajax规则中多了

extraData - 可选的传递参数

extraDataDynamic - 可选 DOM id's，其value属性会作为参数传递

这两个选项，可以让我提供组合域的验证。比如我在数据库中设置了多列组合的唯一约束。

 

参考资料：

https://github.com/posabsolute/jQuery-Validation-Engine官方文档

http://www.position-absolute.com/articles/using-form-ajax-validation-with-the-jquery-validation-engine-plugin/插件作者个人站点