layui-from

最新推荐文章于 2025-04-07 17:09:41 发布

陈小同学

最新推荐文章于 2025-04-07 17:09:41 发布

阅读量494

点赞数

文章标签： layui javascript 前端

本文链接：https://blog.youkuaiyun.com/xiaoChenPengYou/article/details/125904511

版权

这篇博客详细介绍了layui-form的使用，包括select的动态渲染、事件处理、表单数据的获取与回填、自定义验证以及form提交等内容。重点强调了layui.form.render在不同场景的应用以及lay-filter属性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LAYUI-FROM

select的渲染

下拉框的值是动态渲染的，需要使用layui.form.render(type, filter)/layui.form.render()重新渲染一次，最好是在方法提里面添加上，每个渲染都是重新渲染一次，确保不会出现遗漏。

事件

layui.from.on('event(filter)', function(data){
    //data存在数据
    console.log(data)
})

event => input/select/button/submit/radio/switch

获取from表单的数据

```
layui.from.val("lay-filter")   
```
注：lay-filter是from标签的属性

回填from表单的数据

layui.from.val("lay-filter", {key:value,...})

注：lay-filter是from标签的属性

input的name属性的值要和key对应

自定义验证

layui.from.verify({
    name:function(val,dom){
        // val --> 值
        // dom --> DOM元素
        if(val != null){
            return "我是文字"
        }
    },
})

input/select 的属性是lay-verify=“required”，使用 | 号可以使用多个验证。
已经存在的验证：required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证）

from提交

layui.from.submit(filter,function(data){
    //data.field存在表单数据
    console.log(data)
    return false;
})

button按钮必须存在一个属性，lay-submit，不需要值，写上就行。
回调中加上return false; ，可以阻止from提交后的跳转

注

以上所述filter，除了from回填和获取，其它皆是自身的lay-filter的值
layui的input和select的动态禁用也是需要重新渲染的，不然会有意想不到的效果。

禁用
- ```
$(`#id`).attr("disabled", state) 
```
  添加背景色，移除只需要改为removClass
- ```
$(".layui-input").addClass("layui-disabled")
```

简单的使用lyui-from