为WebWork simple theme 添加客户端校验功能！

    默认情况下，要使用WebWork的客户端校验需要使用xhtml theme，但是这个theme会自动生成布局用的表格，给我们的页面布局带来不便。
    查看了生成这些校验的ftl模板后，发现直接修改simple中的几个模板就可以xhtml theme中的校验功能。
    步骤如下：

   1. 将webwork-2.xx.jar中的template中的xhtml和simple个目录拷到 WebRoot/template目录下，修改webwork.properties文件让webwork使用这个目录下的simple theme。这里拷xhtml目录，只是为了使用里面的ftl模板，也可以只拷用到的几个模板。
   2. 修改simple目录中的form.ftl，在文件的第一行加入
      java 代码
         1. <#include "/${parameters.templateDir}/xhtml/form-validate.ftl" /> 
      这个模板将导入所需要的js文件。
   3. 修改simple目录中的form-close.ftl，在文件的最后面增加一行
      java 代码
         1. <#include "/${parameters.templateDir}/xhtml/form-close-validate.ftl" /> 
      这将生成校验用的js代码。
   4. 修改xhtml目录中的form-close-validate.ftl，让错误信息通过alert的方式显示出来。在遇到的第一个
      java 代码
         1. <script> 
      标签的后面加入下面的代码
      java 代码
         1. var errorMessages = ""; 
         2.      
         3.     function addError(field,error){ 
         4.         if(errorMessages) 
         5.             errorMessages+="\n"+error; 
         6.         else 
         7.             errorMessages+=error; 
         8.     } 
      errorMessages用于保存所有的错误信息。addError用于覆盖xhtml/validation.js中的同名函数。再往下找到
      java 代码
         1. function validateForm_${parameters.id}() { 
         2.         form = document.getElementById("${parameters.id}"); 
         3.         clearErrorMessages(form); 
         4.         clearErrorLabels(form);
      修改为
      java 代码
         1. function validateForm_${parameters.id}() { 
         2.         form = document.getElementById("${parameters.id}"); 
         3.         clearErrorMessages(form); 
         4.         clearErrorLabels(form); 
         5.         errorsMessage=""; 
      在文件的底部找到
      java 代码
         1. </#list> 
         2.  
         3.         return !errors; 
         4.     } 
         5. </script> 
         6. </#if> 
      修改为
      java 代码
         1. </#list> 
         2.         if(errors){ 
         3.             alert(errorMessages); 
         4.             errorMessages=""; 
         5.         } 
         6.         return !errors; 
         7.     } 
         8. </script> 
         9. </#if> 
      清除错误信息，避免错误信息重复出现。

评论

1 楼 Jamsa 2006-12-25  

多次贴都未能正常显示，不知是否因为代码中有html标签。建议在编辑器中添加html源码编辑功能！