layui弹窗闪现

提问 已结
11 529
菜头先生
菜头先生 2018-4-12
悬赏:30飞吻
版本:layui 浏览器:
layui新手一枚,求问各位大神!
为什么layui.alert弹窗老是闪现,用layui.open也是一样,就是弹窗刚出来就立即消失了,不知道是怎么回事,以下是我的代码。
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">账号:</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="account" id="account" placeholder="请输入账号" autocomplete="off" class="layui-input" lay-verify="account">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码:</label>
<div class="layui-input-inline" style="width: 200px">
<input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="password">
</div>
</div>
<br />
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="go">登陆</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>

<script>
layui.use(['form', 'layer'], function() {
var form = layui.form,
layer = layui.layer;
form.verify({
account: function(value) {
if(value == null || value == "") {
layer.open({
type: 0,
closeBtn: 1,
content: '账号不能为空!'
});
}
},
password: function(value) {
if(value == null || value == "") {
layer.open({
type: 0,
closeBtn: 1,
content: '密码不能为空!'
});
}
}
});
})
</script>
回帖
  • @菜头先生 建议你去看一下源码的关于verify的实现原理,因为很多时候不了解会绕很多原路,verify只要你设置了验证,layui的表单提交的时候都会先去验证,可以用它提供的veryfy的类型,也可以自定义,写法有两种,
    verify: {
    required: [
    /[\S]+/
    ,'必填项不能为空'
    ]
    ,phone: [
    /^1\d{10}$/
    ,'请输入正确的手机号'
    ]
    ,email: [
    /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
    ,'邮箱格式不正确'
    ]
    ,url: [
    /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
    ,'链接格式不正确'
    ]
    ,number: function(value){
    if(!value || isNaN(value)) return '只能填写数字'
    }
    ,date: [
    /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
    ,'日期格式不正确'
    ]
    ,identity: [
    /(^\d{15}$)|(^\d{17}(x|X|\d)$)/
    ,'请输入正确的身份证号'
    ]
    }
    1. 数组形式第一个成员是正则表达式,用来匹配你对面的内容,对了就继续走下去,匹配错误会返回第二个成员的错误提示。
    2. 函数形式更好理解,就是自己写逻辑只要觉得哪里有问题,直接return ‘错误信息’;form组件只要捕捉到一个错误信息就会截断,标红弹窗一些列操作,弹窗出来的内容就是你返回的错误信息,如果整个form都没遇到错误,那么才会调用你设置的form commit监听如果有的话,没有的话直接表单就提交上去了。
    0 回复
  • 捣鼓了好几天,愣是没搞定[伤心]
    0 回复
  • 会不会跟其他js有冲突?
    0 回复
  • layer.msg("提示语句",{time: 1500}); 只需要修改时间即可、
    0 回复
  • 脏
    2018-4-12
    既然不用做什么实际性的操作的话, 还不如直接用 return "xxxx";[思考]
    0 回复
  • 主要是用错了,verify其实不需要你自己去弹出什么东东,你只需要返回错误的信息,框架本身就会弹出,并且阻止表单提交,你自己只是弹出一个信息,其他什么也没做,表单就提交了,你这个一闪而过其实是表单提交了然后表单也没有一个什么action,等于是刷新了一下页面,所以你要用table组件的东西,正常的操作是在下面添加form的监听,如果通过了验证就会走提交监听里面的代码,当然如果你是表单自己带提交action了那么下面的监听也可以不写。
    layui.use(['form', 'layer'], function () {
    var form = layui.form,
    layer = layui.layer;
    form.verify({
    account: function (value) {
    if (value == null || value == "") {
    return '账号不能为空!';
    // layer.open({
    // type: 0,
    // closeBtn: 1,
    // content: '账号不能为空!'
    // });
    }
    },
    password: function (value) {
    if (value == null || value == "") {
    return '密码不能为空!';
    // layer.open({
    // type: 0,
    // closeBtn: 1,
    // content: '密码不能为空!'
    // });
    }
    }
    });
    form.on('submit(go)', function(data){
    console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
    console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}

    debugger;
    // 如果你是已经写在表单的action了下面的return false要去掉,用默认的表单提交
    // 如果是自己写ajax提交,信息写在这里。最后记得 return false;阻止表单的提交事件

    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });
    });
    0 回复
  • @ 一开始我就是直接return的,但是我还是想要弄懂怎么弹出alert框[嘻嘻]
    0 回复
  • @岁月小偷 那如果我不要verify的话,要怎么弹出alert框,之前没有用verify,直接layer.alert,也是闪现
    0 回复
  • @岁月小偷 好的,谢谢了
    0 回复
  • @菜头先生 不客气,有效果了吗?再送上一个可能会遇到的坑,源码中提供的那些number,或者phone,特别是第一种方式的那种写法,要特别注意,应该是源码的一个bug,因为官方的说明是可以这样定义,phone|required,这样的写法支持多个的验证条件,but,如果你只输入phone的话其实原意是,可以不填,但是如果填写的话必须是个电话号码,这时候你会发现一个很神奇的事情,没有填写过不去~即使你没有设置required因为它用正则表达式去验证,发现了不匹配的现象,如果遇到刚才的问题,不想修改源码的话建议你自己写逻辑覆盖一下,他的phone之类的,可以用方法返回的方式自己写逻辑判断。
    0 回复
  • @岁月小偷 嗯,可以了,发现学了layui之后,之前学的东西好像都不会用了
    0 回复