码迷,mamicode.com
首页 > Web开发 > 详细

layer,Jquery,validate实现表单验证,刷新页面,关闭子页面

时间:2017-12-04 13:13:13      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:reset   cts   rtti   tar   comment   erro   upload   orm   max   

1、表单验证

            //获取父层  
                    var index = parent.layer.getFrameIndex(window.name);  
                    //刷新父层  
                    parent.location.reload();  
                    //关闭弹出层  
                    parent.layer.close(index);  

HTML代码;

 1 <form class="form form-horizontal" id="form-article-add" action="projectManagerVo/handle" method="post">
 2         <input type="hidden" class="input-text"  placeholder="" id="hidden" value = "0" name="status" >
 3             <div class="row cl">
 4             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目编号:</label>
 5             <div class="formControls col-xs-8 col-sm-9">
 6                 <input type="text" class="input-text"  placeholder="" id="proNumber" name="proNumber" >
 7             </div>
 8         </div>
 9         
10         <div class="row cl">
11             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目名称:</label>
12             <div class="formControls col-xs-8 col-sm-9">
13                 <input type="text" class="input-text" placeholder="" id="proName" name="proName" >
14             </div>
15         </div>
16     
17         <div class="row cl">
18             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>承包单位:</label>
19             <div class="formControls col-xs-8 col-sm-9">
20                 <input type="text" class="input-text"  placeholder="" id="department" name="department" >
21             </div>
22         </div>
23         
24         <div class="row cl">
25             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>负责人:</label>
26             <div class="formControls col-xs-8 col-sm-9">
27                 <input type="text" class="input-text"  placeholder="" id="proLeader" name="proLeader" >
28             </div>
29         </div>
30             
31         <div class="row cl">
32             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>开工时间:</label>
33             <div class="formControls col-xs-8 col-sm-9">
34                 <input type="text"  onfocus="WdatePicker({ dateFmt:‘yyyy-MM-dd HH:mm:ss‘,maxDate:‘#F{$dp.$D(\‘commentdatemax\‘)||\‘%y-%M-%d\‘}‘ })" id="commentdatemin" name="startTime"   class="input-text Wdate">
35             </div>
36         </div>
37         <div class="row cl">
38             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>计划完工时间:</label>
39             <div class="formControls col-xs-8 col-sm-9">
40               <input type="text"  onfocus="WdatePicker({ dateFmt:‘yyyy-MM-dd HH:mm:ss‘,minDate:‘#F{$dp.$D(\‘commentdatemin\‘)}‘ })" id="commentdatemax" name="endTime" class="input-text Wdate">
41             </div>
42         </div>
43         
44         <div class="row cl">
45             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目地址:</label>
46             <div class="formControls col-xs-8 col-sm-9">
47                 <input type="text" class="input-text"  placeholder="" id="proLevel" name="proLevel" >
48             </div>
49         </div>
50         <div class="row cl">
51             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>合同金额:</label>
52             <div class="formControls col-xs-8 col-sm-9">
53                 <input type="text" class="input-text"  placeholder="0" id="totalMoney" name="totalMoney" >
54             </div>
55         </div>
56         <div class="row cl">
57             <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>建设单位:</label>
58             <div class="formControls col-xs-8 col-sm-9">
59                 <input type="text" class="input-text"  placeholder="" id="proSource" name="proSource" >
60             </div>
61         </div>
62         <div class="row cl">
63             <label class="form-label col-xs-4 col-sm-2">项目摘要:</label>
64             <div class="formControls col-xs-8 col-sm-9">
65                 <input type ="text" class="input-text" name="remark" />
66             </div>
67         </div>
68         <div class="row cl">
69             <label class="form-label col-xs-4 col-sm-2">项目备注:</label>
70             <div class="formControls col-xs-8 col-sm-9">
71                 <input type="text" class="input-text"  placeholder="" id="memo" name="memo" >
72             </div>
73         </div>
74         
75         <div class="row cl">
76             <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
77                 <button  id = "adult" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
78                 
79                 <button id = "save" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存草稿</button>
80                  
81                 <button id = "reset" class="btn btn-default radius" type="reset">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
82             </div>
83         </div>
84     </form>

Jquery部分代码:

$(function(){
    $(‘.skin-minimal input‘).iCheck({
        checkboxClass: ‘icheckbox-blue‘,
        radioClass: ‘iradio-blue‘,
        increaseArea: ‘20%‘
    });
    
    
    
    //表单验证
    var validator = $("#form-article-add").validate({
        rules:{
            contractNumber:{
                required:true,
            },
            enterMoney:{
                required:true,
                number:true
            },
            commentdatemin:{
                required:true,
                dateISO:true
            },

        },

        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(form) {
            $(form).find(":submit").attr("disabled", true).attr("value", "保存中...");
            //$(form).ajaxSubmit();
             $(form).ajaxSubmit({  
                type: ‘post‘,  
                url: "projectManagerVo/handle",  
                success: function(data){  
                    //获取父层  
                    var index = parent.layer.getFrameIndex(window.name);  
                    //刷新父层  
                    parent.location.reload();  
                    //关闭弹出层  
                    parent.layer.close(index);  
                      
            layer.msg(‘添加成功!‘,{icon: 6,time:2000});
            parent.location.href="projectManagerVo/show";
                }, 
                error: function(XmlHttpRequest, textStatus, errorThrown){  
                    layer.msg(‘ERROR!‘,{icon:5,time:2000});  
                }  
            });
        }
    }); 
    
});

2、非表单提交验证

   var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

  parent.layer.close(index);//关闭弹出的子页面窗口

HTML代码:

 1     <div class="page-container">
 2         <div class="row cl">
 3             <label class="form-label col-xs-4 col-sm-2"><span
 4                 class="c-red">*</span>项目名称:</label>
 5             <div class="formControls col-xs-8 col-sm-9">
 6                 <input type="text" class="input-text" value="${proName }"
 7                     placeholder="" id="" name="proName" readonly="readonly">
 8             </div>
 9         </div>
10         <div class="row cl">
11             <label class="form-label col-xs-4 col-sm-2"><span
12                 class="c-red">*</span>合同名称:</label>
13             <div class="formControls col-xs-8 col-sm-9">
14                 <input type="text" class="input-text" value=""
15                     placeholder="" id="contractName" name="contractName" >
16             </div>
17         </div>
18         <div class="row cl">
19             <label class="form-label col-xs-4 col-sm-2"><span
20                 class="c-red">*</span>合同编号:</label>
21             <div class="formControls col-xs-8 col-sm-9">
22                 <input type="text" class="input-text" value=""
23                     placeholder="" id="contractNumber" name="contractNumber" >
24             </div>
25         </div>
26         <div class="row cl">
27             <label class="form-label col-xs-4 col-sm-2"><span
28                 class="c-red">*</span>项目发票上传:</label>
29             <div class="formControls col-xs-8 col-sm-9">
30                 <div class="uploader-list-container">
31                     <div class="queueList">
32                         <div id="dndArea" class="placeholder">
33                             <div id="filePicker-2"></div>
34                             <p>或将照片拖到这里,单次最多可选300张</p>
35                         </div>
36                     </div>
37                     <div class="statusBar" style="display:none;">
38                         <div class="progress">
39                             <span class="text">0%</span> <span class="percentage"></span>
40                         </div>
41                         <div class="info"></div>
42                         <div class="btns">
43                             <div id="filePicker2"></div>
44                             <div class="uploadBtn">开始上传</div>
45                         </div>
46                     </div>
47                 </div>
48             </div>
49         </div>
50         <div class="row cl">
51             <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
52                 <button
53                     onClick="article_add(‘‘,‘contractVo/save?&projectId=${projectId}&contractScan=‘,‘10001‘);"
54                     class="btn btn-primary radius" type="button">
55                     <i class="Hui-iconfont">&#xe632;</i> &nbsp;&nbsp;保存&nbsp;&nbsp;
56                 </button>
57             </div>
58         </div>
59     </div>

JS代码;

/*项目合同-添加*/
        function article_add(title, url, w, h) {
        if(imagePath && $("#contractNumber").val() && $("#contractName").val()){
            var index = layer.open({
                type : 2,
                title : title,
                content : url+imagePath+‘&contractNumber=‘ + $("#contractNumber").val()+‘&contractName=‘+ $("#contractName").val(),
            });
            layer.full(index);
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
          parent.layer.close(index);//关闭弹出的子页面窗口  
        }else{layer.msg(‘内容不能为空,图片要上传!!‘,{icon: 5,time:2000});}
         
        }

 

layer,Jquery,validate实现表单验证,刷新页面,关闭子页面

标签:reset   cts   rtti   tar   comment   erro   upload   orm   max   

原文地址:http://www.cnblogs.com/HawkFalcon/p/7976285.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!