修改Layui表单验证提示框样式

一直以来都认为layui挺好看的,包括它的弹层组件layer,不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题;它的默认样式是这样的:

修改Layui表单验证提示框样式

因为我页面布局的关系,弹框挡住了按钮,所以我决定得修改一下弹框方式,于是我去看了一下文档,发现弹框的类型是可以修改的,就是给input加上lay-verType属性

修改Layui表单验证提示框样式

我用这种方式试了一下,效果如下

 

修改Layui表单验证提示框样式

 可惜这种方法只能改变弹框类型,无法设置弹框的位置,我想要弹框的位置显示在右边,所以只好用第二种方式了,那就是改源码。

首先我们要找到form.js,然后搜索i.msg

修改Layui表单验证提示框样式

然后将红框中的内容i.msg(f,{icon:5,shift:6})  改为 i.tips(f, r),搞定,效果图:

修改Layui表单验证提示框样式