Layui快速入门之第十节表单

最新推荐文章于 2024-03-27 12:34:06 发布

渊婉

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量1.4k

点赞数 2

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132895639

版权

Layui 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

一：基本用法

表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一

表单需要依赖与form模块的加载，在容器中设定class="layui-form"来标识一个表单元素模块，基本的行区块结构，它提供了响应式的支持，可以换成其他结构，但必须在外层容器中定义class="layui-form"，form模块才能正常工作

<form class="layui-form" action="">
</form>
<script>
layui.use('form', function(){
    var form = layui.form;
});
</script>

二：输入框

输入框组件是对文本框<input type="text">和多行文本框<textarea>元素的扩展

普通输入框

<div class="layui-form">
  <input type="text" name="" placeholder="文本框" class="layui-input">
  <hr class="ws-space-16">
  <textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
</div>

输入框点缀

输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀

<div class="layui-input-{容器类}">
  <div class="layui-input-{前缀类}"></div>
  <input class="layui-input" placeholder="输入框">
  <div class="layui-input-{后缀类}"></div>
</div>

容器类：
- 前置和后置结构：class="layui-input-group"
- 前缀和后缀结构：class="layui-input-wrap"
前缀类：class="layui-input-prefix"
后缀类：class="layui-input-suffix"
前缀显示分隔框：class="layui-input-prefix layui-input-split"
后缀显示分隔框：class="layui-input-suffix layui-input-split"

通过在不同层级中设置规定的 CSS 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容

前置和后置

前置和后置结构是输入框的自适应结构，可以很灵活地控制前后置内容与输入框的宽度比例

结构：

<div class="layui-input-group">
  <div class="layui-input-prefix">前置内容</div>
  <input type="text" class="layui-input">
  <div class="layui-input-suffix">后缀内容</div>
</div>

示例：

<div class="layui-form">
  <div class="layui-form-item">    
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        手机号
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-suffix">
        <button class="layui-btn layui-btn-primary">一个按钮</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        用户名
      </div>
      <input type="text" placeholder="带任意前置内容" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带任意后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        搜索
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <hr style="margin: 32px 0;">
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="前置和后置无分割框" class="layui-input">
      <div class="layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        昵称
      </div>
      <input type="text" placeholder="带前置且无分割框" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带后置且无分割框" class="layui-input">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-tips"></i> 任意后置内容
      </div>
    </div>
  </div>
</div>

前缀和后缀

输入框前缀和后缀是输入框的纯修饰结构，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身

结构：

<div class="layui-input-wrap">
  <div class="layui-input-prefix">前缀图标</div>
  <input type="text" class="layui-input">
  <div class="layui-input-suffix">后缀图标</div>
</div>

示例：

<div class="layui-form">
  <div class="layui-row layui-col-space16">
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" placeholder="带前缀" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" placeholder="带前缀加分隔框" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀加分隔框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-form"></i>
        </div>
        <select>
          <option value="">放置 select 元素</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
        </select>
      </div>
    </div>
  </div>
</div>

动态点缀

该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 lay-affix 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中。如：

input 放在前后置容器中：
<div class="layui-input-group">
  <input type="text" lay-affix="clear">
</div>
 
input 放在前后缀容器中：
<div class="layui-input-wrap">
  <input type="text" lay-affix="clear">
</div>

lay-affix 属性支持设置内置属性值和自定义值

值	描述
`lay-affix="eye"`	密码框显隐
`lay-affix="clear"`	内容清除
`lay-affix="自定义图标值"`	值对应图标类`layui-icon-`后面的名称（#详见图标列表）。可通过「点缀事件」完成自定义操作

密码显隐

<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
  </div>
</div>

内容清除

<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="默认有值状态" lay-affix="clear" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="禁用状态时" lay-affix="clear" disabled class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="只读状态时" lay-affix="clear" readonly class="layui-input">
  </div>
</div>

自定义动态点缀

我们还可以对 lay-affix 属性设置任意图标值，从而实现自定义动态点缀功能

<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="location" lay-filter="location" placeholder="位置" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
  </div>
</div>
<script>
layui.use(function(){
  var form = layui.form;
  // 输入框点缀事件 - 位置示例
  form.on('input-affix(location)', function(data){
    var elem = data.elem; // 输入框
    // do something
    layer.msg('模拟获取位置中…', {icon: 16, time: 1.5*1000}, function(){
      elem.value = '浙江杭州'; // 向输入框赋值
    })
  });
  // 输入框点缀事件 - 搜索示例
  form.on('input-affix(search)', function(data){
    var elem = data.elem; // 输入框
    var value = elem.value; // 输入框的值
    if(!value){
      layer.msg('请输入搜索内容');
      return elem.focus()
    };
    // 模拟搜索跳转
    location.href = '?keywords='+ value + '&_'+ new Date().getTime() +'#affix-custom';
  });
});
</script>

输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。

点缀事件

form.on('input-affix(filter)', callback);

input-affix 为输入框动态点缀事件固定名称
filter 为输入框对应的 lay-filter 属性值

该事件在点击输入框的点缀图标时触发，通过该事件可以完成一些自定义操作

form.on('input-affix(filter)', function(data){
  var elem = data.elem; // 获取输入框 DOM 对象
  var affix = data.affix; // 获取输入框 lay-affix 属性值
});

三：复选框

复选框组件是对 <input type="checkbox"> 元素的美化替代，在原有的特性基础上，对 UI 进行了加强

默认风格

<div class="layui-form">
  <input type="checkbox" name="AAA" title="默认">
  <input type="checkbox" name="BBB" lay-text="选中" checked> 
  <input type="checkbox" name="CCC" title="禁用" disabled> 
</div>

属性 title 可设置复选框标题
属性 checked 可设置默认选中
属性 disabled 可设置禁用状态
属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）
属性 lay-skin 可设置复选框风格，可选值：tag2.8+,switch，默认风格可不填

特别地，当表单提交时，只有选中状态的复选框才能获取到 value，这点和浏览器原有的复选框机制相同

注 2.8+： lay-skin 属性在之前版本默认为标签风格，新版本调整为默认原始风格（lay-skin="primary"）

标签风格

<div class="layui-form">
  <input type="checkbox" name="AAA" title="默认" lay-skin="tag">
  <input type="checkbox" name="BBB" title="选中" lay-skin="tag" checked> 
  <input type="checkbox" name="CCC" title="禁用" lay-skin="tag" disabled> 
</div>

开关风格

<div class="layui-form">
  <input type="checkbox" name="AAA" lay-skin="switch">
  <input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked> 
  <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch"> 
  <input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>

在 title 属性中通过 | 分隔符可设置两种状态下的不同标题

复选框事件

form.on('checkbox(filter)', callback);

checkbox 为复选框事件固定名称
filter 为复选框元素对应的 lay-filter 属性值

该事件在复选框选中或取消选中时触发

<div class="layui-form">
  <div class="layui-form-item">
    <input type="checkbox" name="agreement" value="1" title="是否同意" lay-filter="demo-checkbox-filter">
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo-checkbox-submit">确认</button>
  </div>
</div>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // checkbox 事件
  form.on('checkbox(demo-checkbox-filter)', function(data){
    var elem = data.elem; // 获得 checkbox 原始 DOM 对象
    var checked = elem.checked; // 获得 checkbox 选中状态
    var value = elem.value; // 获得 checkbox 值
    var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
    
    layer.msg('checked 状态: '+ elem.checked);
  });
  // 通过表单提交事件，演示 checkbox 不同状态下的字段结果
  form.on('submit(demo-checkbox-submit)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>

四：单选框

单选框组件是对 <input type="radio"> 元素的美化替代

普通单选框

<div class="layui-form">
  <input type="radio" name="AAA" value="1" title="默认">
  <input type="radio" name="AAA" value="2" title="选中" checked> 
  <input type="radio" name="AAA" value="3" title="禁用" disabled> 
</div>

属性 title 可设置单选框标题
属性 checked 可设置默认选中
属性 disabled 可设置禁用状态
属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）。同组单选框一般设置相同值

自定义标题模板

在 radio 元素后的相邻元素设置特定属性 lay-radio，可以与 radio 标题进行绑定

<div class="layui-form">
  <input type="radio" name="AAA" value="0" title="默认">
  <div lay-radio>
    <span style="color: blue;">自定义模板 ♂</span>
  </div>
  <input type="radio" name="AAA" value="1" title="默认">
  <div lay-radio>
    <span style="color: pink;">自定义模板 ♀</span>
  </div>
</div>

单选框事件

form.on('radio(filter)', callback);

radio 为单选框事件固定名称
filter 为单选框元素对应的 lay-filter 属性值

该事件在单选框被点击或选中时触发

<div class="layui-form">
  <div class="layui-form-item">
    <input type="radio" name="AAA" value="1" title="选项1" lay-filter="demo-radio-filter" checked>
    <input type="radio" name="AAA" value="2" lay-filter="demo-radio-filter" title="选项2"> 
    <input type="radio" name="AAA" value="3" lay-filter="demo-radio-filter" title="选项3"> 
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo-radio-submit">确认</button>
  </div>
</div>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // radio 事件
  form.on('radio(demo-radio-filter)', function(data){
    var elem = data.elem; // 获得 radio 原始 DOM 对象
    var checked = elem.checked; // 获得 radio 选中状态
    var value = elem.value; // 获得 radio 值
    var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
    
    layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
  });
  // 通过表单提交事件，演示 radio 不同状态下的字段结果
  form.on('submit(demo-radio-submit)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>

五：选择框

选择框组件是对 <select> 元素的美化替代，延续了原有的特性，且加入了搜索等扩展

普通选择框

<div class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md6">
    <select>
      <option value="">请选择</option>
      <option value="AAA">选项 A</option>
      <option value="BBB">选项 B</option>
      <option value="CCC">选项 C</option>
    </select>
  </div>
  <div class="layui-col-md6">
    <select>
      <option value="">请选择</option>
      <option value="AAA">选项 A</option>
      <option value="BBB">选项 B</option>
      <option value="CCC" selected>选项 C</option>
    </select>
  </div>
  <div class="layui-col-md6">
    <select disabled>
      <option value="">禁用选择框</option>
      <option value="AAA">选项 A</option>
      <option value="BBB">选项 B</option>
      <option value="CCC">选项 C</option>
    </select>
  </div>
  <div class="layui-col-md6">
    <select>
      <option value="">请选择</option>
      <option value="AAA">选项 A</option>
      <option value="BBB" disabled>选项 B（禁用选项）</option>
      <option value="CCC">选项 C</option>
    </select>
  </div>
</div>

若第一项 value 为空，通常只作为选择框提示性引导；若第一项 value 不为空，则作为默认选中项。
通过给选项添加 selected 属性优先设置默认选中项。
通过给 <select> 或 <option> 标签设置 disabled 可禁用整个选择框或某个选项

分组选择框

通过 <optgroup> 标签给选择框分组

<div class="layui-form">
  <select>
    <option value="">请选择</option>
    <optgroup label="分组 A">
      <option value="A-1">选项 A-1</option>
      <option value="A-2">选项 A-2</option>
      <option value="A-3">选项 A-3</option>
    </optgroup>
    <optgroup label="分组 B">
      <option value="B-1">选项 B-1</option>
      <option value="B-2">选项 B-2</option>
    </optgroup>
  </select>
</div>

搜索选择框

在 <select> 元素上设置 lay-search 可开启选择框的搜索功能

<div class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md6">
    <select lay-search="">
      <option value="">请选择或搜索（默认不区分大小写）</option>
      <option value="1">AAA</option>
      <option value="2">aaa</option>
      <option value="3">BBB</option>
      <option value="4">bbb</option>
      <option value="5">ABC</option>
      <option value="6">abc</option>
      <option value="7">AbC</option>
    </select>
  </div>
  <div class="layui-col-md6">
    <select lay-search="cs">
      <option value="">请选择或搜索（设置区分大小写）</option>
      <option value="1">AAA</option>
      <option value="2">aaa</option>
      <option value="3">BBB</option>
      <option value="4">bbb</option>
      <option value="5">ABC</option>
      <option value="6">abc</option>
      <option value="7">AbC</option>
    </select>
  </div>
  <div class="layui-col-md6">
    <select lay-search="">
      <option value="">请搜索</option>
      <optgroup label="分组a">
        <option value="a1">a1</option>
        <option value="a2">a2</option>
      </optgroup>
      <optgroup label="分组aa">
        <option value="aa1">aA1</option>
        <option value="aa2">aA2</option>
      </optgroup>
      <optgroup label="分组b">
        <option value="b1">b1</option>
        <option value="b2">b2</option>
      </optgroup>
      <optgroup label="分组bb">
        <option value="bb1">bb1</option>
        <option value="bb2">bb2</option>
      </optgroup>
      <optgroup label="分组bbb">
        <option value="bbb1">bBb1</option>
        <option value="bbb2">bBB2</option>
      </optgroup>
      <optgroup label="分组c">
        <option value="c1">c1</option>
        <option value="c2">c2</option>
      </optgroup>
      <optgroup label="分组cc">
        <option value="cc1">cc1</option>
        <option value="cc2">cc2</option>
      </optgroup>
      <optgroup label="分组ccc">
        <option value="ccc1">ccc1</option>
        <option value="ccc2">ccc2</option>
      </optgroup>
      <optgroup label="分组cccc">
        <option value="cccc1">cccc1</option>
        <option value="cccc2">cccc2</option>
      </optgroup>
    </select>
  </div>
</div>

选择框事件

form.on('select(filter)', callback);

select 为选择框事件固定名称
filter 为选择框元素对应的 lay-filter 属性值

该事件在选择框选项选中后触发

<div class="layui-form">
  <select lay-filter="demo-select-filter">
    <option value="">请选择</option>
    <option value="AAA">选项 A</option>
    <option value="BBB">选项 B</option>
    <option value="CCC">选项 C</option>
  </select>
</div>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // select 事件
  form.on('select(demo-select-filter)', function(data){
    var elem = data.elem; // 获得 select 原始 DOM 对象
    var value = data.value; // 获得被选中的值
    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
    
    layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
  });
});
</script>

六：表单相关操作

API

API	描述
var form = layui.form	获得 `form` 模块。
form.render(type, filter)	表单域组件渲染，核心方法。
form.verify(obj)	自定义表单验证的规则。
form.validate(elem) 2.7+	主动触发执行验证。
form.val(filter, obj)	表单赋值或取值。
form.submit(filter, callback) 2.7+	用于主动执行指定表单的提交。
form.on('event(filter)', callback)	事件。
form.config	获取 form 组件全局配置项。
form.set(options)	设置 form 组件全局配置项。

属性

在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 lay-* 为命名格式，如：

<form class="layui-form" lay-filter="form-1">
  <input type="text" class="layui-input" lay-verify="email">
  <input type="checkbox" lay-skin="switch" lay-filter="agree" title="同意">
  <button class="layui-btn" lay-submit>提交</button>
</form>

以下为 form 组件的特定属性列表：

属性	值	描述
title	自定义	设置表单元素标题，一般用于 `checkbox,radio` 元素
lay-filter	自定义	设置表单元素的过滤器，以便用于执行相关方法时的参数匹配
lay-verify	`required`必填项 `phone`手机号 `email`邮箱 `url`网址 `number`数字 `date`日期 `identity`身份证 `自定义规则值`	设置表单项的验证规则，支持单条或多条规则（多条用`\|`分隔），如： `lay-verify="required"` `lay-verify="required\|email"` `lay-verify="其他自定义规则值"` 自定义规则的用法：#详见
lay-vertype	`tips`吸附层 `alert` 对话框 `msg` 默认	设置验证异常时的提示层模式
lay-reqtext	自定义	设置必填项（`lay-verify="required"`）的默认提示文本
lay-affix	#详见	输入框动态点缀，`<input type="text">`元素私有属性
lay-skin	#详见	设置 UI 风格。 `<input type="checkbox">` 元素私有属性
lay-search	默认不区分大小写; 设置`cs`区分大小写	给 `select` 组件开启搜索功能。`<select>` 元素私有属性
lay-submit	无需值	设置元素（一般为`<button>` 标签）触发 `submit` 提交事件
lay-ignore	无需值	设置表单元素忽略渲染，即让元素保留系统原始 UI 风格

渲染

form.render(type, filter);

参数 type 可选，对应表单组件类型，支持：input,select,checkbox,radio；若不填，则指向所有类型。
参数 filter 可选，对应 class="layui-form" 所在元素的 lay-filter 属性值，用于指定需渲染的表单区域。

常规渲染

form 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对动态插入的表单元素的渲染

<form class="layui-form" lay-filter="test">
  动态插入的表单域
</form>
  
<script>
layui.use(function(){
  var form = layui.form;
  
  // 当表单元素被插入插入时，需进行组件渲染才能显示
  form.render(); // 渲染全部表单
  form.render('select'); // 仅渲染 select 元素
  form.render(null, 'test'); // 仅渲染 lay-filter="test" 的容器内的全部表单
  form.render('checkbox', 'test'); // 仅渲染  lay-filter="test" 的容器内的 checkbox 元素
})
</script>

定向渲染 2.7+

该方法还允许指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：

若 jQuery 对象指向表单域容器（class="layui-form"），则渲染该表单域中的所有表单项；2.8+
若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染

定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用

<div class="layui-form" id="form-id">
  <select id="select-id">
    <option value="a">A</option>
  </select>
  <!-- 其他表单元素 -->
</div>
 
<script> 
layui.use('form', function(){
  var $ = layui.$;
  var form = layui.form;
  
  // 定向渲染（一般当表单存在动态生成时，进行渲染）
  // 传入需要渲染的相应表单元素的 jQuery 对象 
  form.render($('#form-id')); // 渲染 id="form-id" 的表单域中的所有表单项
  form.render($('#select-id')); // 仅渲染 id="select-id" 的表单项
});
</script>

忽略渲染

若表单域中的部分表单不需要 Layui 来渲染，那么可通过 lay-ignore 属性让其保留系统原始 UI 风格

<div class="layui-form">
  <select>
    <option value="a">正常渲染的 select</option>
  </select>
  <input type="checkbox" lay-skin="primary" title="正常渲染的 checkbox">
  <hr>
  <select lay-ignore>
    <option value="">忽略渲染的 select</option>
  </select>
  <input type="checkbox" lay-ignore> 忽略渲染的 checkbox
</div>

验证

Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 lay-verify="" 属性值即可指定验证规则，如：

<div class="layui-form">
  <input type="text" lay-verify="required">
  <input type="text" lay-verify="email">
  <input type="text" lay-verify="required|phone|number">
  <button class="layui-btn" lay-submit>提交</button>
</div>

其中，lay-verify 属性的内置规则值可参考上文的，当表单提交时，会自动触发验证

自定义验证规则

form.verify(obj);

参数 obj 是一个对象，用于定义验证规则的集合。

当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如：

<form class="layui-form">
  <input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
  <hr>
  <input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
  <hr>
  <button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
</form>
<script>
layui.use(function(){
  var form = layui.form;
  // 自定义验证规则，如下以验证用户名和密码为例
  form.verify({
    // 函数写法
    // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
    username: function(value, item){
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
        return '用户名不能有特殊字符';
      }
      if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
      if(/^\d+$/.test(value)) return '用户名不能全为数字';
      
      // 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
      if(value === 'xxx'){
        alert('用户名不能为敏感词');
        return true;
      }
    },
    // 数组写法。
    // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
    password: [/^[\S]{6,12}$/, '密码必须为6到12位的非空字符'] 
  });
  // 提交事件
  form.on('submit(demo-verify)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
}) 
</script>

主动触发验证 2.7+

form.validate(elem);

参数 elem 为元素选择器或 jQuery 对象；若验证通过，该方法将返回 true，否则返回 false

<div class="layui-form">  
  <div class="layui-form-item">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-block">
      <input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="vercode" lay-verify="required" class="layui-input">
    </div>
    <div class="layui-inline"> 
      <button type="button" class="layui-btn layui-btn-primary" id="validate-get-vercode">获取验证码</button>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo-validate">提交</button>
    </div>
  </div>
</div>
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  
  // 点击获取验证码
  $('#validate-get-vercode').on('click', function(){
    var isValid = form.validate('#validate-phone');  // 主动触发验证，v2.7.0 新增 
    // 验证通过
    if(isValid){
      layer.msg('手机号规则验证通过');
      // 此处可继续书写「发送验证码」等后续逻辑
      // …
    }
  });
  // 提交事件
  form.on('submit(demo-validate)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>

赋值/取值

form.val(filter, obj);

参数 filter 为表单域容器（class="layui-form"）的 lay-filter 属性值
参数 obj 可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。

<form class="layui-form" action="form.html" lay-filter="demo-val-filter">
  <div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;">
    <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
    <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo-val">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  // 表单赋值
  $('#LAY-component-form-setval').on('click', function(){
    form.val('demo-val-filter', {
      "username": "贤心" // "name": "value"
      ,"password": "AAAAAA"
      ,"interest": 1
      ,"like[write]": true // 复选框选中状态
      ,"close": true // 开关状态
      ,"sex": "女"
      ,"desc": "Layui 用于更简单快速地构建网页界面"
    });
  });
  // 表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('demo-val-filter');
    alert(JSON.stringify(data));
  });
  // 提交事件
  form.on('submit(demo-val)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
})
</script>

提交

表单的提交可以通过事件触发或方法触发

提交事件

在表单域中，对指定按钮设置 lay-submit 属性，即意味着点击该按钮时，将触发提交事件。如：

<form class="layui-form">  
  <input type="text" name="nickname" lay-verify="required" class="layui-input">
  <hr>
  <button class="layui-btn" lay-submit lay-filter="demo-submit">提交按钮</button>
  <button class="layui-btn" id="test-btn-other">普通按钮</button>
</form>
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-submit)', function(data){
    var field = data.field; // 获取表单全部字段值
    var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
    var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
  // 普通按钮
  $('#test-btn-other').on('click', function(){
    layer.msg('点击未设置特定属性的按钮不会触发组件的提交事件');
    return false;
  });
});
</script>

提交方法 2.7+

form.submit(filter, callback);

参数 filter 为表单域容器的 lay-filter 属性值
参数 callback 为执行提交事件后的回调函数

使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。

<fieldset class="layui-elem-field">
  <legend>表单内部</legend>
  <div class="layui-field-box">
    <form class="layui-form" lay-filter="form-demo-submit">  
      <input type="text" name="nickname" lay-verify="required" class="layui-input">
    </form>
  </div>
</fieldset>
<button class="layui-btn" id="test-btn-submit">任意位置按钮</button>
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  // 任意位置按钮触发提交
  $('#test-btn-submit').on('click', function(){
    form.submit('form-demo-submit', function(data){
      var field = data.field; // 获取表单全部字段值
      console.log(data); // 回调函数返回的 data 参数和提交事件中返回的一致
      // 执行提交
      layer.confirm('确定提交吗？', function(index){
        layer.close(index); // 关闭确认提示框
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
      });
    });
    return false;
  });
});
</script>

事件

form.on('event(filter)', callback);

参数 event(filter) 是一个特定结构。event 为事件名，支持：select,checkbox,switch,radio,submit；filter 为元素属性 lay-filter 对应的值，若不填，则指向所有同类组件的事件。
参数 callback 为事件执行时的回调函数，并返回一个包含各种值的 object 类型的参数。

如下以 select 事件为例：

// 指向所有 select 组件的选择事件
form.on('select', function(data){
  console.log(data);
});
 
// 指向元素为 `<select lay-filter="test"></select>` 的选择事件
form.on('select(test)', function(data){
  console.log(data);
});

七：案例演示

<form class="layui-form" action="form.html">
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机号</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
      </div>
      <div class="layui-form-mid" style="padding: 0!important;"> 
        <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证日期</label>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">自定义验证</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="password" name="password" lay-verify="pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
    </div>
    <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected>阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">分组选择框</label>
      <div class="layui-input-inline">
        <select name="quiz">
          <option value="">请选择问题</option>
          <optgroup label="城市记忆">
            <option value="你工作的第一个城市">你工作的第一个城市</option>
          </optgroup>
          <optgroup label="学生时代">
            <option value="你的工号">你的工号</option>
            <option value="你最喜欢的老师">你最喜欢的老师</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">搜索选择框</label>
      <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search>
          <option value="">直接选择或搜索选择</option>
          <option value="1">layer</option>
          <option value="2">form</option>
          <option value="3">layim</option>
          <option value="4">element</option>
          <option value="5">laytpl</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </div> 
  <div class="layui-form-item">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected>浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled>宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
    <div class="layui-form-mid layui-text-em">
      <i class="layui-icon layui-icon-tips" lay-tips="{
        content: '此处只是演示联动排版，并未做联动交互',
        margin: '0 0 0 -10px'
      }"></i>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="arr[0]" title="选项1">
      <input type="checkbox" name="arr[1]" title="选项2" checked>
      <input type="checkbox" name="arr[2]" title="选项3">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标签框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
      <input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
      <input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3" disabled>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
layui.use(['form', 'laydate', 'util'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var util = layui.util;
  
  // 自定义验证规则
  form.verify({
    pass: [
      /^[\S]{6,12}$/,
      '密码必须6到12位，且不能出现空格'
    ]
  });
  
  // 指定开关事件
  form.on('switch(switchTest)', function(data){
    layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
  });
  
  // 提交事件
  form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
  
  // 日期
  laydate.render({
    elem: '#date'
  });
  
  // 普通事件
  util.on('lay-on', {
    // 获取验证码
    "get-vercode": function(othis){
      var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
      // 验证通过
      if(isvalid){
        layer.msg('手机号规则验证通过');
        // 此处可继续书写「发送验证码」等后续逻辑
        // …
      }
    }
  });
});