layui必填提示框修改,layui提交form表单必填提示框修改,select提示弹出位置不对处理,layui自定义提示文字,layui自定义条件提示

前言

1、弹出框提示修改
2、提示文字自定义
3、自定义条件提示

1、效果

修改前
在这里插入图片描述

修改后
在这里插入图片描述

实现方式

我的layui版本是2.6.8
js文件只有layui.js(之前的版本可修改form.js文件源码)
所以打开layui.js修改源码,修改如下

// 将
i.msg(f,{
   icon:5,shift:6})
// 替换成
i.tips(f, r)

或者以前版本的修改form.js文件(如果没有上面 i.msg(f,{icon:5,shift:6}) 这个的时候)

// 将
layer.msg(tips || verify[thisVer][1], {
   
    icon: 5
    ,shift: 6
});
// 替换成
layer.tips(tips || verify[thisVer][1], item);

如图1下所示(Hbuilder颜色未改,则是黄背景)
在这里插入图片描述
或如图2所示
在这里插入图片描述
我喜欢把提示框颜色改了,以下就是我修改的样式(打开layui.css换行放到后面即可)

/* layer提示*/
.layui-layer-tips .layui-layer-content{
   
	background: #79c758;
}
.layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR{
   
    border-bottom-color: #79c758;/* 左边 右边*/
}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{
   
    
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
想要将 layuiselect 设置为必填,可以通过以下步骤实现: 1. 给 select 添加一个必填的标记,比如一个红色的星号(*) 2. 在提交表单时,通过 JavaScript 判断 select 是否已经选择了值,如果没有选择,则阻止表单的提交,并弹出提示框提示用户选择值。 以下是一个示例代码: HTML 代码: ```html <div class="layui-form-item"> <label class="layui-form-label">必填项:</label> <div class="layui-input-block"> <select name="select" lay-verify="required"> <option value=""></option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <span class="required">*</span> </div> </div> ``` JavaScript 代码: ```javascript layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; //监听提交 form.on('submit(formDemo)', function(data){ //判断 select 是否已经选择了值 if(data.field.select === ''){ layer.msg('请选择选项'); return false; //阻止表单提交 } //表单提交 layer.msg(JSON.stringify(data.field)); return false; }); }); ``` 在这段代码中,我们使用了 layui 的表单验证功能,通过在 select 标签中添加 `lay-verify="required"` 属性,来告诉 layui 这个字段是必填的。在 JavaScript 中,我们监听了表单的提交事件,并在提交之前判断了 select 是否已经选择了值。如果没有选择,就阻止表单的提交,并弹出提示框提示用户选择值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值