当前位置: 首页 > news >正文

Layui快速入门之第十节 表单

目录

一:基本用法

二:输入框

普通输入框

输入框点缀

前置和后置

前缀和后缀

动态点缀

密码显隐

内容清除

自定义动态点缀

点缀事件

三:复选框

默认风格

标签风格

开关风格

复选框事件

四:单选框

普通单选框

自定义标题模板

单选框事件

五:选择框

普通选择框

分组选择框

搜索选择框

选择框事件

六:表单相关操作

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>元素的扩展

普通输入框

<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 somethinglayer.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-verifyrequired必填项
phone手机号
email邮箱
url网址
number数字
date日期
identity身份证
自定义规则值
设置表单项的验证规则,支持单条或多条规则(多条用|分隔),如:
lay-verify="required"
lay-verify="required|email"
lay-verify="其他自定义规则值"
自定义规则的用法:#详见
lay-vertypetips吸附层
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,submitfilter 为元素属性 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('手机号规则验证通过');// 此处可继续书写「发送验证码」等后续逻辑// …}}});
});
http://www.lryc.cn/news/167570.html

相关文章:

  • Linux之yum/git的使用
  • 使用ExcelJS快速处理Node.js爬虫数据
  • 轻量级的Python IDE —— Thonny
  • java设计模式之观察者模式
  • 掌动智能分享:性能压力测试的重要性与优势
  • C# ppt文件转换为pdf文件
  • 使用Pyarmor保护Python脚本不被反向工程
  • STM32单片机——串口通信(轮询+中断)
  • Python if语句的嵌套应用
  • C++中带默认值的函数参数
  • 记录一次部署Hugo主题lotusdocs到Github Pages实践
  • stm32---基本定时器(TIM6,TIM7)
  • HTML网页设计
  • 阶段性总结:跨时钟域同步处理
  • [交互]接口与路由问题
  • linux 6中4T磁盘识别并分区格式化挂接
  • 【Unity】ShaderGraph应用(浮动气泡)
  • Android EditText setTranslationY导致输入法覆盖问题
  • MySQL 导出和导入数据
  • ubuntu22.04 设置网卡开机自启
  • 持续部署:提高敏捷加速软件交付(内含教程)
  • Spark_Spark内存模型管理
  • C++之operator=与operator==用法区别(二百一十八)
  • 【漏洞复现】WordPress插件wp-file-manager任意文件上传漏洞(CVE-2020-25213)
  • 基于安卓Java试题库在线考试系统uniapp 微信小程序
  • Java入坑之语法糖
  • VUE响应式
  • Godot 和 VScode配置C#环境注意事项
  • 三、Mediasoup进程通信实现的原理
  • 【计算机网络】 TCP——四次挥手