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

本文介绍如何在WebWork框架中定制客户端校验功能,包括修改模板以支持自定义校验逻辑,并展示如何通过alert方式展示错误信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    默认情况下,要使用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> 
      清除错误信息,避免错误信息重复出现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值