layui.form的理解

最新推荐文章于 2025-09-03 00:20:32 发布

原创最新推荐文章于 2025-09-03 00:20:32 发布 · 4.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript

本文详细介绍了如何在页面中使用LayUI创建表单，包括form标签的运用、input和按钮的样式设置，表单提交与局部刷新，以及自动化渲染、验证规则、取值赋值和事件触发的深入讲解。特别关注了动态数据反显和自定义验证的实现。

<form class="layui-form"></form>

1.class="layui-form",加上这个class，layui就会认为他是一个form表单，即使把form标签换成其他的元素

 <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

2.使用form表单提交时，我们的每一个input框都可以使用这个样式，其中autocomplete=''off'所代表的的意思是我们在浏览器中输入表单信息的时候，往往input输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，不想启用就off

 <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

3.提交按钮我们可以使用这个模板，其中lay-submit只针对提交按钮使用，也就是只要加上这个属性，那么他就是提交按钮（之前做点击重置按钮会刷新列表功能时，将这个属性添加到重置button中，点击重置就会验证数据不能为空，就是这个原因）， lay-filter="" 的值，4你可以借助该参数，对表单完成局部更新。type="reset",我理解的为：用在重置按钮上，可以清空我们form表单的数据。

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

4.点击编辑时将这条数据反显回<select>标签里，遇到一个问题：select下拉框已经默认选中‘女’，但是下拉框里面还是显示‘男’，这是因为表单元素是动态插入的。这时 form 模块的自动化渲染是会对其失效的。你只需要执行 form.render(type, filter); 方法即可。（vue的双向绑定机制下可能不存在这个问题），其中type指的是表单的type类型，默认对全部类型的表单进行一次更新。可局部刷新的 type有：select,checkbox,radio，第二个参数filter的使用方法如下

<div class="layui-form" lay-filter="test1">
  …
</div>
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态

5.事件触发

默认只支持下面的几种触发事件


//语法：
form.on('event(过滤器值)', callback);
//用例
//会对所有select下拉框触发
form.on('select', function(data){
  console.log(data);
})
//只针对会select下拉框lay-filter='test'触发
form.on('select(test)', function(data){
  console.log(data);
});;

6.表单的验证

只需要在表单元素上加上 lay-verify="" 属性值即可。直接可以使用的主要有：email,require,number,phone 等，如：

<input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

当然支持自定义验证

<input type="text" lay-verify="username" placeholder="请输入用户名">

form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
})

7.表单的取值和赋值

取值：var data1 = form.val("formTest")，赋值：var data1 = form.val("formTest"，data);

其中data要符合josn格式，简单来说没有data就是取值，有data就是赋值

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});
 
//获取表单区域所有值
var data1 = form.val("formTest");