layer系列之弹层layer.prompt 如何使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑?

时间:2024-03-02 15:04:54

layer官网:https://www.layui.com/doc/modules/layer.html

layer在线调试:http://layer.layui.com/ 

使用layer.open实现方式:

附:源码如下

layer.open({
//formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: \'是否确信将账号临时挂账?\',
area: [\'300px\', \'240px\'],
btnAlign: \'c\',
closeBtn:\'1\',//右上角的关闭
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
btn:[\'确认\',\'取消\',\'关闭\'],
yes: function (index, layero) {
var value1 = $(\'#remark\').val();//获取多行文本框的值
alert(\'您刚才输入了:\' + value1);
layer.close(index);

 

//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方

 

},
no:function(index)
{

alert(\'您刚才点击了取消按钮\');
layer.close(index);

return false;//点击按钮按钮不想让弹层关闭就返回false

},
close:function(index)
{
alert(\'您刚才点击了关闭按钮\');

return false;//点击按钮按钮不想让弹层关闭就返回false
}

 

});

 

 

 

 

 

 

 

 

 

附:layer.open中按钮点击事件:

 

layer.open({
content: \'test\'
,btn: [\'按钮一\', \'按钮二\', \'按钮三\']
,yes: function(index, layero){
//按钮【按钮一】的回调
},btn2: function(index, layero){
//按钮【按钮二】的回调
alert(\'这是点击了按钮二\');
return false;//点击后不关闭窗口,需返回false
},btn3: function(index, layero){
//按钮【按钮三】的回调
alert(\'这是点击了按钮三\');
return false;//点击后不关闭窗口,需返回false
}
,cancel: function(){
//右上角关闭回调
}
});

 

用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装.....

使用layer.prompt时,

如果文本框输入值是空的话点击确定没有反应,不能向下执行。

但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??

注:使用layer.prompt时,layer使用的版本为layer-v3.0

官方代码说明如下:

//prompt层新定制的成员如下
{
formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
value: \'\', //初始时的值,默认空字符
maxlength: 140, //可输入文本的最大长度,默认500
}

//例子1
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

//例子2
layer.prompt({
formType: 2,
value: \'初始值\',
title: \'请输入值\',
area: [\'800px\', \'350px\'] //自定义文本域宽高
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

示例代码如下

layer.prompt({

      formType:2,

      title:\'请填写排除原因(注:必填项)\',

      area:[\'500px\',\'150px\'],

      btnAlign:\'c\'

},function(value,index,elem){

    alert(value);

    laker.close(index);

});

 

 由官网查看文档可知layer.prompt也是继承layer.open的,所以改成如下所示:

layer.prompt({

    formType: 2,
    title: \'请填写排除原因(注:必填项)\',
    area: [\'500px\'\'150px\'],
    btnAlign: \'c\',
    yes: function(index, layero){
        // 获取文本框输入的值
        var value = layero.find(".layui-layer-input").val();
        if (value) {
            alert("输入值为:" + value);
            layer.close(index);
        else {
            alert("输入值为空!");
        }
    }
});

 

 

 

 

说明:以上弹出的文本框是layer自带的,根据formType指定的,如果自己绑定文本框则可如下尝试:

layer.prompt({
formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: \'是否确信将账号临时挂账?\',
area: [\'300px\', \'100px\'],
btnAlign: \'c\',
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
yes: function (index, layero) {
var value1 = $(\'#remark\').val();//获取多行文本框的值
alert(\'您刚才输入了:\' + value1);

//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方

    }

});

效果如下: