当前位置: 代码迷 >> Web前端 >> 替WebWork simple theme 添加客户端校验功能
  详细解决方案

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

热度:631   发布时间:2012-11-06 14:07:00.0
为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源码编辑功能!
  相关解决方案