Layui快速入门之第十节 表单
目录
一：基本用法
二：输入框
普通输入框
输入框点缀
前置和后置
前缀和后缀
动态点缀
密码显隐
内容清除
自定义动态点缀
点缀事件
三：复选框
默认风格
标签风格
开关风格
复选框事件
四：单选框
普通单选框
自定义标题模板
单选框事件
五：选择框
普通选择框
分组选择框
搜索选择框
选择框事件
六：表单相关操作
API
属性
渲染
常规渲染
定向渲染 2.7+
忽略渲染
验证
自定义验证规则
主动触发验证 2.7+
赋值/取值
提交
提交方法 2.7+
事件
七：案例演示
一：基本用法
表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一
表单需要依赖与form模块的加载，在容器中设定class="layui-form"来标识一个表单元素模块，基本的行区块结构，它提供了响应式的支持，可以换成其他结构，但必须在外层容器中定义class="layui-form"，form模块才能正常工作
二：输入框
输入框组件是对文本框和多行文本框
输入框点缀
输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀
- 容器类：
- 前置和后置结构：
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 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容
前置和后置
前置和后置结构是输入框的自适应结构，可以很灵活地控制前后置内容与输入框的宽度比例
- 结构：
前置内容
后缀内容
- 示例：
身高
cm
手机号
用户名
搜索
身高
cm
昵称
任意后置内容
前缀和后缀
输入框前缀和后缀是输入框的纯修饰结构，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身
- 结构：
前缀图标
后缀图标
- 示例：
动态点缀
该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 lay-affix 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中。如：
input 放在前后置容器中：
input 放在前后缀容器中：
lay-affix 属性支持设置内置属性值和自定义值
| 值 | 描述 |
|---|---|
lay-affix="eye" |
密码框显隐 |
lay-affix="clear" |
内容清除 |
lay-affix="自定义图标值" |
值对应图标类layui-icon-后面的名称（#详见图标列表）。可通过「点缀事件」完成自定义操作 |
密码显隐
内容清除
自定义动态点缀
我们还可以对 lay-affix 属性设置任意图标值，从而实现自定义动态点缀功能
输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。
点缀事件
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 属性值
});三：复选框
复选框组件是对 元素的美化替代，在原有的特性基础上，对 UI 进行了加强
默认风格
- 属性
title可设置复选框标题 - 属性
checked可设置默认选中 - 属性
disabled可设置禁用状态 - 属性
value可设置值，否则选中时返回的默认值为on（浏览器默认机制） - 属性
lay-skin可设置复选框风格，可选值：tag2.8+,switch，默认风格可不填
特别地，当表单提交时，只有选中状态的复选框才能获取到 value，这点和浏览器原有的复选框机制相同
注 2.8+： lay-skin 属性在之前版本默认为标签风格，新版本调整为默认原始风格（lay-skin="primary"）
标签风格
开关风格
在 title 属性中通过 | 分隔符可设置两种状态下的不同标题
复选框事件
form.on('checkbox(filter)', callback);
checkbox为复选框事件固定名称filter为复选框元素对应的lay-filter属性值
该事件在复选框选中或取消选中时触发
四：单选框
单选框组件是对 元素的美化替代
普通单选框
- 属性
title可设置单选框标题 - 属性
checked可设置默认选中 - 属性
disabled可设置禁用状态 - 属性
value可设置值，否则选中时返回的默认值为on（浏览器默认机制）。同组单选框一般设置相同值
自定义标题模板
在 radio 元素后的相邻元素设置特定属性 lay-radio，可以与 radio 标题进行绑定
自定义模板 ♂
自定义模板 ♀
单选框事件
form.on('radio(filter)', callback);
radio为单选框事件固定名称filter为单选框元素对应的lay-filter属性值
该事件在单选框被点击或选中时触发
五：选择框
选择框组件是对 元素的美化替代，延续了原有的特性，且加入了搜索等扩展
普通选择框
- 若第一项
value为空，通常只作为选择框提示性引导；若第一项value不为空，则作为默认选中项。 - 通过给选项添加
selected属性优先设置默认选中项。 - 通过给
或标签设置disabled可禁用整个选择框或某个选项
分组选择框
通过 标签给选择框分组
搜索选择框
在 元素上设置 lay-search 可开启选择框的搜索功能
选择框事件
form.on('select(filter)', callback);
select为选择框事件固定名称filter为选择框元素对应的lay-filter属性值
该事件在选择框选项选中后触发
六：表单相关操作
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 组件的特定属性列表：
| 属性 | 值 | 描述 |
|---|---|---|
| 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 | #详见 | 输入框动态点缀， |
| lay-skin | #详见 | 设置 UI 风格。 |
| lay-search | 默认不区分大小写; 设置 cs区分大小写 |
给 select 组件开启搜索功能。 |
| lay-submit | 无需值 | 设置元素（一般为submit 提交事件 |
| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格 |
渲染
form.render(type, filter);
- 参数
type可选，对应表单组件类型，支持：input,select,checkbox,radio；若不填，则指向所有类型。 - 参数
filter可选，对应class="layui-form"所在元素的lay-filter属性值，用于指定需渲染的表单区域。
常规渲染
form 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对动态插入的表单元素的渲染
定向渲染 2.7+
该方法还允许指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：
- 若 jQuery 对象指向表单域容器（
class="layui-form"），则渲染该表单域中的所有表单项；2.8+ - 若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染
定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用
忽略渲染
若表单域中的部分表单不需要 Layui 来渲染，那么可通过 lay-ignore 属性让其保留系统原始 UI 风格
忽略渲染的 checkbox
验证
Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 lay-verify="" 属性值即可指定验证规则，如：
其中，lay-verify 属性的内置规则值可参考上文的，当表单提交时，会自动触发验证
自定义验证规则
form.verify(obj);
- 参数
obj是一个对象，用于定义验证规则的集合。
当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如：
主动触发验证 2.7+
form.validate(elem);
- 参数
elem为元素选择器或 jQuery 对象； 若验证通过，该方法将返回 true，否则返回 false
赋值/取值
form.val(filter, obj);
- 参数
filter为表单域容器（class="layui-form"）的lay-filter属性值 - 参数
obj可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。
提交
表单的提交可以通过事件触发或方法触发
提交事件
在表单域中，对指定按钮设置 lay-submit 属性，即意味着点击该按钮时，将触发提交事件。如：
提交方法 2.7+
form.submit(filter, callback);
- 参数
filter为表单域容器的lay-filter属性值 - 参数
callback为执行提交事件后的回调函数
使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。
事件
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);
});
// 指向元素为 `` 的选择事件
form.on('select(test)', function(data){
console.log(data);
});七：案例演示