layer,Jquery,validate實現表單驗證，刷新頁面，關閉子頁面
阿新 • • 發佈：2017-12-04
名稱 ron primary ocl span () bsp money 新頁面
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"><spanclass="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});} }
layer,Jquery,validate實現表單驗證，刷新頁面，關閉子頁面