替WebWork simple theme 添加客户端校验功能
为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>
清除错误信息,避免错误信息重复出现。
默认情况下,要使用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源码编辑功能!