之前我有写过一篇<aui:validator/>标签的使用说明。

但是只适用于固定的页面。

如果是在页面中通过js动态创建的DOM元素的话，是无法生效的。我通过查阅alloyui 和yui的官网，以及在liferay的官网上的检索。总结了一下动态绑定aui表单验证的解决方案。
假使我们的表单id为 fm

假使我们通过js创建了一个

<input type="text" id="id1" name="name1"/>

这样的元素。我们想要绑定的事件。让这个元素为必填项，且值只能为 aaa

那么我们可以通过js来这么实现：

1.让我们来看看如何实现让此输入框必填。

在创建dom元素之后执行下面的方法

 

<script>
var fieldRequiredLabel = "此字段为必输项";
var inputDom = document.getElementById("id1");
var rulesJson = "{" + inputDom.getAttribute("name") + ":{required:true}}";
rulesJson = eval('(' + rulesJson + ')');
var fieldStringsJson = "{" + inputDom.getAttribute("name") + ":{required:\""+fieldRequiredLabel+"\"}}";
fieldStringsJson = eval('(' + fieldStringsJson + ')');
bindFormValid(rulesJson,fieldStringsJson)
</script>
<aui:script>
function bindFormValid(rulesJson,fieldStringsJson) {
AUI().use(
  'aui-form-validator',
  function(Y) {
        new Y.FormValidator(
      {
        boundingBox: '#fm',
        fieldStrings: fieldStrings,
        rules: rules,
        showAllMessages: true
      }
    );
  }
);
}
</aui:script>

这样我们就实现了动态创建的输入框的必填校验。类似的简单校验。比如只可以填数字。最大长度等。都可以通过这种方式来实现。

2.自定义校验函数的实现。

更多的时候我们需要的不只是简单的校验。往往还需要自定义的一些方法来实现。例如我们想判断输入框必填，且判断其值是否是 aaa 如果是 则通过校验。
在创建dom元素之后执行下面的方法
js代码示例如下:

<script>
var shouldBeaaaLabel="此字段仅可输入 aaa";
var fieldRequiredLabel = "此字段为必输项";
var inputDom = document.getElementById("id1");
var rulesJson = "{" + inputDom.getAttribute("name") + ":{required:true,custom:true,shouldBeaaa:true}}";
rulesJson = eval('(' + rulesJson + ')');
var fieldStringsJson = "{" + inputDom.getAttribute("name") + ":{required:\""+fieldRequiredLabel+"\",shouldBeaaa:\""+shouldBeaaaLabel+"\"}}";
fieldStringsJson = eval('(' + fieldStringsJson + ')');
bindFormValid(rulesJson,fieldStringsJson)
</script>
<aui:script>
function bindFormValid(rulesJson,fieldStringsJson) {
AUI().use(
  'aui-form-validator',
  function(Y) {
    var CONFIG = Y.config.FormValidator;
     Y.mix(CONFIG.RULES, {shouldBeaaa: function (val, fieldNode, ruleValue) {
      var result = false;
      if(val == 'aaa'){
        result = true;
      }
      return result;
    }
        new Y.FormValidator(
      {
        boundingBox: '#fm',
        fieldStrings: fieldStrings,
        rules: rules,
        showAllMessages: true
      }
    );
  }
);
}
</aui:script>

这样就实现了通过js为动态创建的页面元素来绑定 aui的简单校验与自定义校验。

当使用了动态绑定的校验器之后不知道是什么原因。当我的表单校验全部正确的时候，无法提交表单。经调查之后，找到了曲线救国的方案。在绑定校验器的时候，将校验器放置在一个数组之中。

在 form的 onSubmit里面 填写 event.preventDefault();

然后给submit按钮绑定事件。代码如下:

遍历所有的校验器，调用校验方法，判断是否有错误。

如果全部没有错误。那么再次遍历校验器，覆盖事件触发。然后提交表单即可。

var myvalidators=new Array();
function showErrs(){
	var canSubmitFlag = true;
	AUI().ready('aui-form-validator',function (A) {
	for(var i = 0; i < myvalidators.length; i++){
		var validator1 = myvalidators[i];
		validator1.validate();
		if(validator1.hasErrors()){
			canSubmitFlag = false;
			break;
		}
	}
	if(canSubmitFlag){
		for(var i = 0; i < myvalidators.length; i++){
			var v = myvalidators[i];
			v.on("validateField", function (event) {
				for (var k in event.details) {
					var name = event.details[k].validator.field;
					event.halt();
					break;
				}
		});
		}
		<portlet:namespace/>mySubmit();
	}else{
		canSubmitFlag = true;
	}
});
}

但是接下来会遇到的问题就是js中无法获取jsp中通过标签写出来的校验器。无法判断是否正确通过校验。那么我们的解决办法就是在js的ready方法中覆盖页面的标签生成的校验器。

但是。。。。还是有问题。当删除dom结构的时候，对应的校验器无法删除。会报错。那么 解决方案就是在触发删除dom的函数中。从array中获取对应的校验器。重写触发的方法，使其无法触发，并在数组中将其删除即可。