layer弹窗页面框被layui的表单验证消息框影响了

提问 已结
7 92
sugaral
sugaral 2018-12-7
悬赏:20飞吻
我使用了layer的弹窗弹出页面框,页面框里放了表单。我用了layer的表单验证来验证表单,当验证失败时弹出消息框提示,但是他自带的表单验证消息框影响了我的页面框

本来应该是在页面框点击保存后,消息框弹出、震动、3秒后消失。现在变成了消息框弹出,页面框震动、3秒后消失,然后消息框还留下来了

结论:原本是校验消息框应执行的事件,由我的表单页面框代替执行了。
页面框的表单代码:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>角色管理</title>
<!-- 插件css -->
<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/jw/css/jw.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/alice/form/1.0.2/ui-form-1.0.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/alice/form/1.0.2/ui-button-orange-1.3.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/arale/dialog/1.3.0/dialog.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/tree/css/zTreeStyle/zTreeStyle.css"/>

<link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/layui/css/layui.css"/>

<link rel="stylesheet" type="text/css" href="${ctx}/style/base/role/css/roleManager.css"/>
<script type="text/javascript">
seajs.use("${ctx}/style/base/role/js/role_manager.js");
</script>
<body>
<form class="layui-form layui-form-pane" style="margin:15px;display:none;">
<div class="layui-form-item ">
<label class="layui-form-label">角色名称:</label>
<div class="layui-input-block">
<input type="text" name="role_name" required lay-verify="required" placeholder="请输入角色名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述:</label>
<div class="layui-input-block">
<input type="text" name="role_descn" placeholder="请输入描述" class="layui-input">
</div>
</div>

<div class="layui-form-item layui-hide" >
<div class="layui-input-block" style="text-align:right;">
<button id="submit" type="button" class="layui-btn layui-btn layui-btn-sm" lay-submit lay-filter="formDemo" >提交</button>
</div>
</div>
</form>
</body>
</html>
js代码:
$(document).on("click","#doAdd",function(){
var form=$(".layui-form");
var index=layer.open({
type:1,
title:"新增角色",
content:form,
btn:["取消","保存"],
area:"500px",
shade:[0.8, '#002233'],
skin:"layui-layer-lan",
btn2:function(){
console.log(index);
doSubmit(index);
return false;
}
});
});

var doSubmit=function(index){
var submit=$("#submit");
layui.form.on("submit(formDemo)",function(data){
//调用RPC保存数据
//backManagerService.roleAdd(data.field);
console.log("新增角色成功,角色名:"+data.field.role_name);
//关闭弹窗
layer.close(index);
});
submit.trigger("click");
}
回帖
  • LJDragon
    2018-12-7
    @sugaral 看看css样式,是不是冲突了,别的css样式覆盖了layui的
    0 回复
  • LJDragon
    2018-12-7
    可以使用吸附弹出框,表单的lay-verType:'tips'
    0 回复
  • sugaral
    2018-12-7
    @LJDragon 试了下,和样式没关系


    layui版本换了一下也没解决,难道是系统里有其他东西和layrui冲突了?
    0 回复
  • sugaral
    2018-12-8
    @LJDragon 把页面精简了一下,还是不行,而选用ifream弹出层就没这个问题。

    下面这个是精简后依旧出问题的页面弹出层。
    父页面:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>角色管理</title>

    #include("/common/common-js.jetx")
    #include("/base/role/form_UI.jetx")

    <script type="text/javascript">
    seajs.use("${ctx}/style/base/role/js/layuiTest.js");
    </script>

    <body>
    <button type="button" id="tc">弹窗</button>
    </body>
    </html>
    父页面JS
    define(function (require, exports, module) {

    var $ = require("jquery2");
    var layer = require("layer");
    require("layuiAll");

    //按钮
    $(document).on("click","#tc",function(){
    var content=$("#addRole");
    //弹窗
    var index=layer.open({
    type:1,
    title:"弹窗",
    content:content,
    btn:["取消","确认"],
    //确认回调
    btn2:function(index){
    var submitBtn=$("#submit");
    submitBtn.trigger("click");
    return false;
    },
    });
    });
    });
    子页面:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>角色管理</title>

    <!-- 插件css -->
    <link rel="stylesheet" type="text/css" href="${ctx}/static-res/sea-modules/1.0/layui/css/layui.css"/>

    #include("/common/common-js.jetx")

    <script type="text/javascript">
    seajs.use("${ctx}/style/base/role/js/form_UI.js");
    </script>

    <body>
    <form id="addRole" class="layui-form layui-form-pane" style="margin:15px;" >
    <div class="layui-form-item ">
    <label class="layui-form-label">角色名称:</label>
    <div class="layui-input-block">
    <input type="text" id="role_name" name="role_name" lay-verType="tips" required lay-verify="required" placeholder="请输入角色名称" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">描述:</label>
    <div class="layui-input-block">
    <input type="text" id="role_descn" name="role_descn" placeholder="请输入描述" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item layui-hide" >
    <div class="layui-input-block" style="text-align:right;">
    <button id="submit" class="layui-btn layui-btn layui-btn-sm" lay-submit lay-filter="formDemo" >提交</button>
    </div>
    </div>

    </form>
    </body>
    </html>
    子页面JS
    define(function (require, exports, module) {

    var $ = require("jquery2");
    var layer = require("layer");
    require("layuiAll");


    layui.form.on("submit(formDemo)",function(data){
    console.log(data.field.role_name);
    });

    });
    这个是ifream弹出层


    0 回复
  • sugaral
    2018-12-8
    @sugaral 上面说错了,那2个图是页面弹出层,还有应该是iframe
    0 回复
  • sugaral
    2018-12-8
    @LJDragon
    还有一件事,我通过trigger("click")来触发layui自带的校验,但是他好像没有返回成功还是失败标志。如果在form.on(submit(*),function(){...})里设置标识我又怕他校验是异步的。总之如果既能用他自带校验,也能返回标识就好了。
    0 回复
  • sugaral
    6天前
    @LJDragon 问题解决了,我在引入layui.all.js后,又设置了一个叫"layer"的全局变量引入了layer.js,造成变量名冲突,也就是全局变量污染。删掉layer这个全局变量后一切都解决了
    0 回复