layer,Jquery,validate实现表单验证，刷新页面，关闭子页面
Posted Hawk喵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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});} }
以上是关于layer,Jquery,validate实现表单验证，刷新页面，关闭子页面的主要内容，如果未能解决你的问题，请参考以下文章