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

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">i> 保存并提交审核button>
78                 
79                 <button id = "save" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">i> 保存草稿button>
80                  
81                 <button id = "reset" class="btn btn-default radius" type="reset">  取消  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">i>   保存  
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});}
         
        }

 

转载于:https://www.cnblogs.com/HawkFalcon/p/7976285.html