Layui快速入门之第十节表单

旧城等待， 2024-03-03 03:22 71阅读 0赞

**目录**

一：基本用法

二：输入框

普通输入框

输入框点缀

前置和后置

前缀和后缀

动态点缀

密码显隐

内容清除

自定义动态点缀

点缀事件

三：复选框

默认风格

标签风格

开关风格

复选框事件

四：单选框

普通单选框

自定义标题模板

单选框事件

五：选择框

普通选择框

分组选择框

搜索选择框

选择框事件

六：表单相关操作

API

属性

渲染

常规渲染

定向渲染 2.7+

忽略渲染

验证

自定义验证规则

主动触发验证 2.7+

赋值/取值

提交

提交方法 2.7+

事件

七：案例演示

--------------------

### 一：基本用法 ###

表单组件`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>`元素的扩展

#### 普通输入框 ####

#### 输入框点缀 ####

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

*  容器类：
    
     *  前置和后置结构：`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-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-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` 属性支持设置内置属性值和自定义值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>lay-affix="eye"</code></td> 
   <td>密码框显隐</td> 
  </tr> 
  <tr> 
   <td><code>lay-affix="clear"</code></td> 
   <td>内容清除</td> 
  </tr> 
  <tr> 
   <td><code>lay-affix="自定义图标值"</code></td> 
   <td>值对应图标类<code>layui-icon-</code>后面的名称（<a href="https://layui.org.cn/docs/icon/icon.html#list" title="#详见图标列表" rel="nofollow">#详见图标列表</a>）。<br> 可通过「<a href="https://layui.org.cn/docs/form/input.html#affix-event" title="点缀事件" rel="nofollow">点缀事件</a>」完成自定义操作</td> 
  </tr> 
 </tbody> 
</table>

#### 密码显隐 ####

#### 内容清除 ####

#### 自定义动态点缀 ####

我们还可以对 `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 进行了加强

##### 默认风格 #####

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

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

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

##### 标签风格 #####

##### 开关风格 #####

在 `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">` 元素的美化替代

##### 普通单选框 #####

*  属性 `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>` 标签给选择框分组

##### 搜索选择框 #####

在 `<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 ####

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>var form = layui.form</td> 
   <td>获得&nbsp;<code>form</code>&nbsp;模块。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#render" title="form.render(type, filter)" rel="nofollow">form.render(type, filter)</a></td> 
   <td>表单域组件渲染，核心方法。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#verify" title="form.verify(obj)" rel="nofollow">form.verify(obj)</a></td> 
   <td>自定义表单验证的规则。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#validate" title="form.validate(elem)" rel="nofollow">form.validate(elem)</a>&nbsp;2.7+</td> 
   <td>主动触发执行验证。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#val" title="form.val(filter, obj)" rel="nofollow">form.val(filter, obj)</a></td> 
   <td>表单赋值或取值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#submit" title="form.submit(filter, callback)" rel="nofollow">form.submit(filter, callback)</a>&nbsp;2.7+</td> 
   <td>用于主动执行指定表单的提交。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/form/form.html#on" title="form.on('event(filter)', callback)" rel="nofollow">form.on('event(filter)', callback)</a></td> 
   <td>事件。</td> 
  </tr> 
  <tr> 
   <td>form.config</td> 
   <td>获取 form 组件全局配置项。</td> 
  </tr> 
  <tr> 
   <td>form.set(options)</td> 
   <td>设置 form 组件全局配置项。</td> 
  </tr> 
 </tbody> 
</table>

#### 属性 ####

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

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

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

#### 渲染 ####

`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=""` 属性值即可指定验证规则，如：

其中，`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('手机号规则验证通过');
            // 此处可继续书写「发送验证码」等后续逻辑
            // …
          }
        }
      });
    });