使用JQuery，但不使用JQuery validate 来验证表单非空情况

转载自：http://blog.youkuaiyun.com/hlbt0112/article/details/50598465

需求：表格分为主表与子表，见图。主表项个数不变（题目、排序序号、是否必填、是否多选），子表动态生成（每点击一次新鲜选项内容，生成一组选项名称，排序序号，是否默认选择）在点击“保存”，验证主表项非空，以及子表项非空。

    难点：子表变化可能为 “删除一组，增加一组，组数不变数据变化，组数增加同时数据变化”。

    解决思路：分为前后台同时解决

前台：在点击“保存”时，判断主表内容是否为空（这很简单），同时判断动态子表是否为空（难点）。

后台：获取动态子表生成的Json串，解析为一个List对象，判断这个对象的 size() 是否为3。如果是，则进行数据库操作；不是，则拦截返回页面。

    实现步骤：

前台：

1、给“保存”按钮从 submit类型修改为 button 类型，防止按钮强制提交，而不进行非空方法判断。

2、将表单<form> 标签中的action属性改为“”（空值），通过添加一个 <input  type="hidden"> 来保存要发送的表单URL。

3、用jQuery为“保存”按钮设置点击验证事件：主表判断是否每个空格都有值；子表因为动态生成，所以统计子表需要填的空格的数量，在统计子表空格中已经添入数值的数量，用两个数值比较，如果数值一致则提交，不一致则拦截。

[javascript]  view plain  copy

1. $(document)  
2.             .ready(  
3.                     function() {  
4.                         var optLen;  
5.                         var selectLen;  
6.                         var j;  
7.                         $("#btnSubmit").click(function() {  
8.                             /* 
9.                              * 验证question项 
10.                              */  
11.                             var title = $(".control-group > .controls> input[name='title']").val();  
12.                             //alert("title="+title);  
13.                             if(title =='' || title ==undefined || title == null){  
14.                                 $(".sku-custombar > span >font").text("有未填的数据，请填写！");  
15.                                 return;  
16.                             }  
17.                             var sequence = $(".control-group > .controls> input[name='sequence']").val();  
18.                             //alert("sequence="+sequence);  
19.                             if(sequence =='' || sequence ==undefined || sequence == null){  
20.                                 $(".sku-custombar > span >font").text("有未填的数据，请填写！");  
21.                                 return;  
22.                             }  
23.                               
24.                               
25.                             /* 
26.                              * 验证option项 
27.                              */  
28.                             optLen = $(".marginright5 > input[type='text']").get().length;  
29.                             j = 0;  
30.                             for (var i = 0; i < optLen; i++) {  
31.                                 var obj = $(".marginright5 > input[type='text']").get();  
32.   
33.                                 var value = $(obj[j]).val();  
34.                                 if (value != undefined && value != null && value != '') {  
35.                                     j++;  
36.                                 }  
37.                             }  
38.                             if (j != optLen) {  
39.                                 $(".sku-custombar > span >font").text("有未填的数据，请填写！");  
40.                                 return;  
41.   
42.                             } else {  
43.                                 var form_action = $('#form_action').val();  
44.                                 $(".sku-custombar > span >font").text("");  
45.                                 //alert(form_action);  
46.                                 $('#inputForm').attr('action',form_action) ;  
47.                                 $("#inputForm").submit();  
48.                             }  
49.   
50.                         });  
51. }  

4、拦截效果图

=================================================================

下面介绍后台拦截判定：

1、在《利用Jquery+JS生成Json串，动态创建添加项》一文中，生成了子表的Json串儿。在后台创建一个解析该字符串儿的 JavaBean。包含两个字段，key值和value值。其中的 value 值是一个List结合，用来包含一组子表中的数据。

[java]  view plain  copy

1. public class FeedBackOptJSONBean {  
2.     @JSONField(name="key")  
3. <pre name="code" class="java"><pre name="code" class="java">    <span style="font-family: Arial, Helvetica, sans-serif;">private String optionName;</span>  

@JSONField(name="value")private List<String> options;}

2、解析Json串儿，判断JSON串儿对象中的 List<String>是否含有4个数值（来自前台子表的 id, name, sequence, selected），如果数量不足4个，返回该页面。如果满足，将数据交给Service层提交给DB。

[java]  view plain  copy

1. if(StringUtils.isNotBlank(optJson)){  
2.             List<FeedBackOptJSONBean> optionList = JSON.parseArray(optJson, FeedBackOptJSONBean.class);  
3.             newOptionList = new ArrayList<FeedbackOptionsBeans>();  
4.               
5.             for (FeedBackOptJSONBean optJSONBean : optionList) {  
6.                 if (optJSONBean.getOptions().size()<4) {  
7.                     String message = "有未填数据，修改失败";  
8.                     return "redirect:" + adminPath + "/personal/feedback/editfeedbackByquestionId?questionId="  
9.                             +questionId+"&feedbackId="+feedbackId+"&type="+type+"&message="+message;  
10.                 }else{  
11.                     FeedbackOptionsBeans newOption = new FeedbackOptionsBeans();  
12.                     newOption.setOptionId(optJSONBean.getOptions().get(0));  
13.                     newOption.setName(optJSONBean.getOptions().get(1));  
14.                     newOption.setSequence(Integer.parseInt(optJSONBean.getOptions().get(2)));  
15.                     newOption.setChecked(Integer.parseInt(optJSONBean.getOptions().get(3)));  
16.                       
17.                     newOptionList.add(newOption);  
18.                 }  
19.             }  
20.               
21.             feedbackService.deleteOptionnFeedback(questionId);  
22.               
23.             for (FeedbackOptionsBeans opt : newOptionList) {  
24.                   
25.                 feedbackService.saveOptionWithQuestionId( opt, questionId);  
26.             }  
27.         }  

3、以上完成了后台验证。