之前我有写过一篇<aui:validator/>标签的使用说明。
但是只适用于固定的页面。
如果是在页面中通过js动态创建的DOM元素的话,是无法生效的。我通过查阅alloyui 和yui的官网,以及在liferay的官网上的检索。总结了一下动态绑定aui表单验证的解决方案。
假使我们的表单id为 fm
假使我们通过js创建了一个
1 | < input type = "text" id = "id1" name = "name1" /> |
这样的元素。我们想要绑定的事件。让这个元素为必填项,且值只能为 aaa
那么我们可以通过js来这么实现:
1.让我们来看看如何实现让此输入框必填。
在创建dom元素之后执行下面的方法
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <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代码示例如下:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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按钮绑定事件。代码如下:
遍历所有的校验器,调用校验方法,判断是否有错误。
如果全部没有错误。那么再次遍历校验器,覆盖事件触发。然后提交表单即可。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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中获取对应的校验器。重写触发的方法,使其无法触发,并在数组中将其删除即可。