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

转载自：http://blog.csdn.net/hlbt0112/article/details/50598465

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



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

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

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

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

    实现步骤：

前台：

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



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



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

[javascript] view
plain copy

$(document)  

            .ready(  

                    function() {  

                        var optLen;  

                        var selectLen;  

                        var j;  

                        $("#btnSubmit").click(function() {  

                            /* 

                             * 验证question项 

                             */  

                            var title = $(".control-group > .controls> input[name='title']").val();  

                            //alert("title="+title);  

                            if(title =='' || title ==undefined || title == null){  

                                $(".sku-custombar > span >font").text("有未填的数据，请填写！");  

                                return;  

                            }  

                            var sequence = $(".control-group > .controls> input[name='sequence']").val();  

                            //alert("sequence="+sequence);  

                            if(sequence =='' || sequence ==undefined || sequence == null){  

                                $(".sku-custombar > span >font").text("有未填的数据，请填写！");  

                                return;  

                            }  

                              

                              

                            /* 

                             * 验证option项 

                             */  

                            optLen = $(".marginright5 > input[type='text']").get().length;  

                            j = 0;  

                            for (var i = 0; i < optLen; i++) {  

                                var obj = $(".marginright5 > input[type='text']").get();  

  

                                var value = $(obj[j]).val();  

                                if (value != undefined && value != null && value != '') {  

                                    j++;  

                                }  

                            }  

                            if (j != optLen) {  

                                $(".sku-custombar > span >font").text("有未填的数据，请填写！");  

                                return;  

  

                            } else {  

                                var form_action = $('#form_action').val();  

                                $(".sku-custombar > span >font").text("");  

                                //alert(form_action);  

                                $('#inputForm').attr('action',form_action) ;  

                                $("#inputForm").submit();  

                            }  

  

                        });  

}  

4、拦截效果图



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

下面介绍后台拦截判定：

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

[java] view
plain copy

public class FeedBackOptJSONBean {  

    @JSONField(name="key")  

<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

if(StringUtils.isNotBlank(optJson)){  

            List<FeedBackOptJSONBean> optionList = JSON.parseArray(optJson, FeedBackOptJSONBean.class);  

            newOptionList = new ArrayList<FeedbackOptionsBeans>();  

              

            for (FeedBackOptJSONBean optJSONBean : optionList) {  

                if (optJSONBean.getOptions().size()<4) {  

                    String message = "有未填数据，修改失败";  

                    return "redirect:" + adminPath + "/personal/feedback/editfeedbackByquestionId?questionId="  

                            +questionId+"&feedbackId="+feedbackId+"&type="+type+"&message="+message;  

                }else{  

                    FeedbackOptionsBeans newOption = new FeedbackOptionsBeans();  

                    newOption.setOptionId(optJSONBean.getOptions().get(0));  

                    newOption.setName(optJSONBean.getOptions().get(1));  

                    newOption.setSequence(Integer.parseInt(optJSONBean.getOptions().get(2)));  

                    newOption.setChecked(Integer.parseInt(optJSONBean.getOptions().get(3)));  

                      

                    newOptionList.add(newOption);  

                }  

            }  

              

            feedbackService.deleteOptionnFeedback(questionId);  

              

            for (FeedbackOptionsBeans opt : newOptionList) {  

                  

                feedbackService.saveOptionWithQuestionId( opt, questionId);  

            }  

        }  

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