技术平台

# JSP Form校验提交组件

# 前言

JSP Form校验提交组件是基于JSP开发规范下衍生出的一套Form表单前后端交互组件，支持统一的表单页面布局、统一校验规范、统一提交和回填等相关能力。

使用本组件的前提是：当前页面是JSP并且按照致远JSP开发组件规范引入相关文件。

# 1、Form布局规范

在<form>标签外层包一层<div class="form_area">，使用此代码后，整个form便可以被V5的Seeyon UI相关API调用。

<div class="form_area align_center">
    <form id="tableForm" action="list.htm" class="align_center">
		<input id="name" type="text" class="validate" validate="{type:'string',name:'姓名',notNull:true,minLength:4,maxLength:20,character:'-!@#$'}">
	</form>
</div>

更详细的表单form代码示例，可参考Seeyon UI 3.0组件 - Form表单 (opens new window)

# 2、Form校验

在text等可编辑元素增加class="validate" validate="xxx"参数，可使用平台标准的校验规则。

如要校验某种类型，要求input存在class为validate，并具备validate属性进行校验规则配置，validate属性值的格式要求是json对象定义字符串(不含大括号)。

例如：

<input id="username" name="username" type="text" class="validate" validate="type:'string',maxLength:20,minLength:6"/>

在Javascript中使用JQuery的扩展函数formobj、jsonSubmit或validate方法时，会执行校验过程，例如：

注：只要按照JSP开发规范，正确引入common_footer.jsp，则可以调用这三个方法。

// 该方法用于直接提交form：获取form中所有元素+执行元素validate校验+校验通过后自动提交form
$("#username").jsonSubmit();
// 该方法用于获取form中所有元素值，可获取到值后通过AJAX异步提交：获取form中所有元素+执行元素validate校验
var formObj = $("#username").formobj();
// 该方法仅用作校验Form元素准确性
var bool = $("#username").validate();

# validate校验属性字典

以下属性均运作于前面validate属性中，全部都是json字符串的属性。

主属性是验证某一个类型必须存在的属性，副属性可选，不是必须存在的属性。

目前一共可以验证13种类型，再加上最后一种给定自定义正则表达式的自定义验证类型。

类型 主属性和可选值 副属性和可选值（空白表示无）
1、非空 notNull:true或nullable:true
2、包含空格的非空 notNullWithoutTrim:true
3、数字（小数） isNumber:true或type:number或type:1或type:2 max或maxValue（必须是数字，如果两个都给出，只使用前者） min或minValue（必须是数字，如果两个都给出，只使用前者） integerDigits整数位-数（必须是数字） decimalDigits或dotNumber小数位数（必须是数字，如果两个都给出，只使用前者）
4、数字（整形） isInteger:true max或maxValue（必须是数字，如果两个都给出，只使用前者） min或minValue（必须是数字，如果两个都给出，只使用前者）
5、电子邮件 isEmail:true或type:email
6、字符串 isWord:true或type:string或type:8或type:9 character:，将所有你认为是特殊字符的字符放进去，例如character:!@#$%^*()。 （如果特殊字符中存在中划线-的话，必须放在第一个）（如果特殊字符中存在脱字符^的话，必须不能放在第一个）
7、不允许为默认值 isDeaultValue:true、deaultValue:一个给定的值
8、固定电话号码 type:telephone
9、手机号码 type:mobilePhone
10、日期类型（要求格式：yyyy-MM-dd） type:3
11、日期时间类型（要求格式：yyyy-MM-dd HH:mm:ss） type:4
12、最大长度 maxLength:一个数字
13、最小长度 minLength:一个数字
14、自定义正则表达式 regExp:一个自定义的正则表达式，例如/[\d+]/
15、自定义校验函数 主属性：func:一个自己定义的函数（必须是全局函数，可以是匿名函数） （该函数可以没有返回值（js中没有返回值的话默认为null），返回null或false表示校验未通过）
16、自定义错误提示 主属性：errorMsg:一个字符串，例如:请输入数字！
17、js设置校验规则 请看下方的MxtCheckMsg方法 -

# 3、Form值回填

场景：点击编辑时，打开编辑的JSP页面，并且回填值到编辑的JSP页面。

本组件适用于后端Controller已经准备好页面所需的值，在进入JSP页面时，通过EL表达式直接注入值到JSP页面。

自动form回填可以自动为表单元素设置值，而不再需要自己写那些繁琐的js。但事实证明，这种主动回填的代码极易引发XSS注入。并且违背前后端分离原则，不适合纯前端开发工作者！

注：只要按照JSP开发规范，正确引入common_header.jsp和common_footer.jsp，则可以调用form值回填组件

（1）编写前端代码：

如下示例，JSP里面有两个div（也可以是form），每个div都有几个输入框或checkbox或select 注意div的Id和每一个表单元素的Id。 在同一个容器里，每一个表单元素的Id必须唯一。

   <div id="area1">
       用户名：<input type="text" id="username"/>
       密码：<input type="text" id="userage"/>
       爱好：<input type="checkbox" id="aihao1" value="1"/>(1)<input type="checkbox" id="aihao2" value="2"/>(2)<input type="checkbox" id="aihao3" value="3"/>(3)
       性别：<input type="radio" id="sex1" value="1"/>(男)<input type="radio" id="sex2" value="2"/>(女)
       星级：<select id="qiuji">
           <option value="1">地球</option>
           <option value="2">月球</option>
           <option value="3">火星</option>
       </select>
       实力：<select id="shili" multiple="true">
           <option value="1">天</option>
           <option value="2">地</option>
           <option value="3">人</option>
       </select>
   </div>
   <div id="area22">
       用户名：<input type="text" id="username"/>
       密码：<input type="text" id="userage"/>
       爱好：<input type="checkbox" id="aihao1" value="1"/>(1)<input type="checkbox" id="aihao2" value="2"/>(2)<input type="checkbox" id="aihao3" value="3"/>(3)
       性别：<input type="radio" id="sex1" value="1"/>(男)<input type="radio" id="sex2" value="2"/>(女)
       星级：<select id="qiuji">
           <option value="1">地球</option>
           <option value="2">月球</option>
           <option value="3">火星</option>
       </select>
       实力：<select id="shili" multiple="true">
           <option value="1">天</option>
           <option value="2">地</option>
           <option value="3">人</option>
       </select>
   </div>

（2）编写后台代码：

如下示例，与前台两个div对应，这里有两个Map，分别对应前端的两个div容器。

每一个Map都必须要通过调用request对象的setAttribute方法，添加到request对象中。

调用setAttribute时，Map的key的值必须要以ff开头，后面紧跟前台对应的容器Id。

比如前端<div id="area1">，后端Map的key就等于ffarea1

向Map中put键值对时，key必须是容器中对应的表单元素的Id。

如果表单元素是多选（例如checkbox、select），多个值之间用逗号分隔开。

		/**以下代码片段存放于MVC中的Controller，在重定向JSP页面前执行：**
       Map<String, String> test = new HashMap<String, String>();
       test.put("username", "zho'ulj");
       test.put("userage", "16\"'");
       test.put("aihao2", "2");
       test.put("aihao3", "3");
       test.put("sex2", "2");
       test.put("qiuji", "2,3");
       test.put("shili", "1,2,3");
	   // 回填第一个div
       request.setAttribute("ffarea1", test);
       Map<String, String> test2 = new HashMap<String, String>();
       test2.put("username", "岳不群！");
       test2.put("userage", "16\"'");
       test2.put("aihao2", "2");
       test2.put("aihao3", "3");
       test2.put("sex2", "2");
       test2.put("qiuji", "2,3");
       test2.put("shili", "1,2,3");
	   // 回填第二个div
       request.setAttribute("ffarea22", test2);

（3）扩展用法：AJAX调用表单回填：

我们也可以在JSP页面通过AJAX调用获取后端对象，再使用JQueryDom..fillform(对象)的形式将值回填到表单元素中。这是推荐使用的一种回填方案。

	   // 以下是平台提供的AJAX写法，还不知道如何使用，可在`JSP前端业务组件>AJAX组件`中学习
       tBS.testAjaxMethod(param, {success:
              function(obj){
                 $("#myform").fillform(obj);
              }
           });

# 4、Form提交

本组件主要作为CTPJSP页面的form提交的标准方式，禁止使用普通的form提交。

使用该组件可以极大的简化前后台代码的提交和获取参数的方式。

使用限制：

  1. 除radio外，同一个容器（或分区）内表单元素（包括checkbox）不能有相同的name或id。
  2. select如果是多选的话，后台会转换成List类型的对象。 该组件通过jQuery插件的方式提供，调用jsonSubmit方法即可。

主要有四种提交方式（前台），四种获取参数的方式（后台）

普通提交（无分区、无分组）、分组提交（无分区）、分区提交（无分组）、分区分组式提交。

注：只要按照JSP开发规范，正确引入common_header.jsp和common_footer.jsp，则可以调用form提交组件

# Form普通提交方式

  • 前台调用jsonSubmit方法提交参数。
  • 后台调用ParamUtil.getJsonParams()获取参数。
  • getJsonParams方法返回一个Map类型的对象。
  • 其key是json对象的属性名，value是json对象的属性值
  • 如果json对象的属性值是一个数组的话，Map的value就是一个List。

(1)前台JSP页面：

   <form id="form1" name="form1" method="post" action="test.do?method=testJsonSubmit2">
       <table>
           <tbody>
               <tr><td colspan="2"><label>表单<font color="red">无分区无分组</font>提交</label></td></tr>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="pwd"/></td>
               </tr>
           </tbody>
       </table>
   </form>

(2)前台js代码：

	// 参数中的debug属性在正式开发的时候不需要给出，或者需要设置为false；
   $("#form1").jsonSubmit({debug:false});

(3)后台代码：

   Map params = ParamUtil.getJsonParams();
   params.get("username");
   params.get("pwd");

# Form分组提交方式

所谓的分组，其实就是一个容器内有多个name或id相同的输入框。 前台的提交方式与普通方式没有区别，都是调用jsonSubmit方法。 后台获取参数的方式有区别，使用ParamUtil.getJsonParamsGroup()方法。 getJsonParamsGroup方法返回的是一个List类型的对象。 List中的每一个元素都是一个Map。 该Map的内容与getJsonParams返回的Map内容相同。

（1）前台JSP

   <form id="form4" name="form4" method="post" action="test.do?method=testJsonSubmit4">
       <table>
           <tbody>
               <tr><td colspan="2"><label>表单<font color="red">无分区分组</font>提交</label></td></tr>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="pwd"/></td>
               </tr>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="pwd"/></td>
               </tr>
               <tr>
                   <td><input id="savebtn4" type="button" value="提交paramGroup"/></td>
                   <td></td>
               </tr>
           </tbody>
       </table>
   </form>

（2）前台js代码：

   // 参数中的debug属性在正式开发的时候不需要给出，或者需要设置为false；
   $("#form4").jsonSubmit({debug:false});

（3）后台代码：

   List groups1 =ParamUtil.getJsonParamsGroup();
   for(Object o : groups1){
       if(o instanceof Map){
           Map map = (Map)o;
           for(Object entryObj : map.entrySet()){
               if(entryObj instanceof Map.Entry){
                   Map.Entry entry = (Map.Entry)entryObj;
                   System.out.println(entry.getKey() + ":" + entry.getValue());
               }
           }
       }
   }

# Form分区提交方式

前台的提交方式有区别，方法名不变，都是jsonSubmit方法。 不过参数有改变，{domains:["domain31","domain32"],debug:false} 多了一个domains属性，其值必须是一个数组，数组中的每一个元素必须是要提交的多个容器的id。 后台获取参数的方式也不同了，使用ParamUtil.getJsonDomain("domain31")方法。 getJsonDomain方法的参数需要给出前台给出的容器Id。 如果有多个domain，必须调用多次getJsonDomain方法来获取到所有的domain。 getJsonDomain的返回值也是一个Map。 该Map的内容与getJsonParams返回的Map内容相同。

（1）前台JSP

   <form id="form3" name="form3" method="post" action="test.do?method=testJsonSubmit3">
       <table id="domain31">
           <tbody>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="pwd"/></td>
               </tr>
           </tbody>
       </table>
       <table id="domain32">
           <tbody>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="pwd"/></td>
               </tr>
               <tr>
                   <td><input id="savebtn3" type="button" value="提交domain"/></td>
                   <td></td>
               </tr>
           </tbody>
       </table>
   </form>

（2）前台js代码：

   /**
   参数中的debug属性在正式开发的时候不需要给出，或者需要设置为false；
   domains属性值必须是一个数组，数组中的每一个元素必须要要提交的多个容器的id。
   **
   $("#form4").jsonSubmit({domains:["domain31","domain32"],debug:false});

（3）后台代码：

   Map domain1 =ParamUtil.getJsonDomain("domain31");
   domain1.get("username");
   domain1.get("pwd");

   Map domain2 =ParamUtil.getJsonDomain("domain32");
   domain2.get("username");
   domain2.get("pwd");

# Form分区分组式提交

这种方式其实是前面两种方式的组合： 分区分组是提交，首先是分区是提交。 每个分区中，可能存在分组，也可能不存在分组。 前台的提交方式与分区式提交相同，都是jsonSubmit方法。 参数也相同，都是{domains:["domain31","domain32"],debug:false} 多了一个domains属性，其值必须是一个数组，数组中的每一个元素必须是要提交的多个容器的id。 对于存在分组的分区，后台获取参数的方式:List groups1 =ParamUtil.getJsonDomainGroup("domain51"); 参数就是前台分区的id，其返回值是一个List，其中的每一个元素是一个Map。 对于不存在分组的分区，后台获取参数的方式与分区式提交后台获取参数的方式相同。 都是Map domain2 = ParamUtil.getJsonDomain("domain52");

（1）前台JSP

   <form id="form5" name="form5" method="post" action="test.do?method=testJsonSubmit5">
       <table id="domain51">
           <tbody>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="passwork"/></td>
               </tr>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="passwork"/></td>
               </tr>

               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="passwork"/></td>
               </tr>
           </tbody>
       </table>
       <table id="domain52">
           <tbody>
               <tr>
                   <td><label>用户名</label></td>
                   <td><input type="text" name="username"/></td>
               </tr>
               <tr>
                   <td><label>密码</label></td>
                   <td><input type="password" name="passwork"/></td>
               </tr>
               <tr>
                   <td><input id="savebtn5" type="button" value="提交domainGroup2"/></td>
                   <td></td>
               </tr>
           </tbody>
       </table>
   </form>

（2）前台js代码：

   /**
   参数中的debug属性在正式开发的时候不需要给出，或者需要设置为false；
   domains属性值必须是一个数组，数组中的每一个元素必须要要提交的多个容器的id。
   **/
   $("#form4").jsonSubmit({domains:["domain51","domain52"],debug:false});

（3）后台代码：

   List groups1 = ParamUtil.getJsonDomainGroup("domain51");
   for(Object o : groups1){
       if(o instanceof Map){
           Map map = (Map)o;
           for(Object entryObj : map.entrySet()){
               if(entryObj instanceof Map.Entry){
                   Map.Entry entry = (Map.Entry)entryObj;
                   System.out.println(entry.getKey() + ":" + entry.getValue());
               }
           }
       }
   }
   Map domain2 = ParamUtil.getJsonDomain("domain52");
   for(Object entryObj : domain2.entrySet()){
       if(entryObj instanceof Map.Entry){
           Map.Entry entry = (Map.Entry)entryObj;
           System.out.println(entry.getKey() + ":" + entry.getValue());
       }
   }

如果需要获取页面中某个分区中的数据对象进行Ajax提交或其它处理，可以调用jquery插件的formobj方法，比如：

   var obj = $("mydomain").formobj();
   tBS.testAjaxSubmit(obj,{success:
      function(retObj){
         alert("success");
      }
   });
属性名 属性值与说明
domains 必须是一个数组，分区式提交时该参数必须给出，里面每一个元素都必须是其中一个分区的id。
debug 当该属性的值是true时，会在提交之前将生成的json字符串alert出来，以便调试。
beforeSubmit 该属性的值必须是一个函数，当该函数的返回值等于false时，不会提交该form。

# 关于jsonSubmit

jsonSubmit方法可以模拟异步提交方式，可使用callback参数指定回调函数实现，如：$("#mydiv").jsonSubmit({callback : function() { alert('回调函数'); }});

# Form表单数据清除

框架提供clearform函数用于清除某个区域内的表单输入域的值，代码例子如下：

<script>
$(document).ready(function() {
    $("#mybtn").click(function() {
	  // 本方法可清理form中的所有input元素值
      $("#mydomain").clearform();
    });
});
</script>
<input type="button" id="mybtn">
<div id="mydomain">
<input type="text"><input type="checkbox"><input type="radio"><textarea></textarea>
</div>

# Form表单控件批量禁用/启用

框架提供disable和enable函数用于批量禁用和启用某个区域的控件，代码例子如下：

<script>
  $(document).ready(function() {
    $("#mybtn").toggle(function() {
      $("#mycal1").disable();
      $("#testRegion").disable();
    }, function() {
      $("#mycal1").enable();
      $("#testRegion").enable();
    });
  });
</script>
<input type="button" id="mybtn" value="禁用/启用">
<div id="testRegion">
    <a href="javascript:void(0)" class="common_button common_button_gray">按钮1</a><a href="javascript:void(0)"
        class="common_button common_button_gray">按钮2</a> <input type="text" class="comp"
        comp="type:'calendar',ifFormat:'%m-%Y-%d'"> <input type="checkbox"><input type="radio">
</div>
编撰人：het

快速跳转

← 附件上传下载组件 →