jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
public/frontend/layui-main/docs/form/checkbox.md Executable file
View File

@@ -0,0 +1,178 @@
---
title: 复选框
toc: true
---
# 复选框
> 复选框组件是对 `<input type="checkbox">` 元素的美化替代，在原有的特性基础上，对 UI 进行了加强。
<h2 id="default" lay-toc="{}">默认风格</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<input type="checkbox" name="DDD" title="半选" id="ID-checkbox-ind">
</div>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
var $ = layui.$;
// 初始设置半选
$('#ID-checkbox-ind').prop('indeterminate', true); // 半选属性只能动态设置
form.render('checkbox');
});
</script>
</textarea>
</pre>
- 属性 `title` 可设置复选框标题
- 属性 `checked` 可设置默认选中
- 属性 `disabled` 可设置禁用状态
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
注 <sup>2.8+</sup>： `lay-skin` 属性在之前版本默认为标签风格，新版本调整为默认原始风格（`lay-skin="primary"`）。
<h2 id="tag" lay-toc="{}">标签风格</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
<h2 id="switch" lay-toc="{}">开关风格</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<input type="checkbox" name="AAA" lay-skin="switch">
<br>
<input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked>
<br>
<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
<br>
<input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>
<!-- import layui -->
</textarea>
</pre>
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<div class="layui-form-item">
<input type="checkbox" name="AAA" value="0">
<div lay-checkbox>
自定义<a href="#target-url"><ins>标题模板</ins></a>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="BBB" value="1" lay-skin="tag">
<div lay-checkbox>
<i class="layui-icon layui-icon-heart" style="position: relative; top: 1px; line-height: normal;"></i> 标题模板
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="CCC" value="2" lay-skin="switch">
<div lay-checkbox>
<i class="layui-icon layui-icon-moon"></i> |
<i class="layui-icon layui-icon-light"></i>
</div>
</div>
</div>
<!-- import layui -->
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
| 风格 | 事件 |
| --- | --- |
| 默认风格 / 标签风格 | `form.on('checkbox(filter)', callback);` |
| 开关风格 | `form.on('switch(filter)', callback);` |
- `checkbox` 和 `switch` 为复选框事件固定名称
- `filter` 为复选框元素对应的 `lay-filter` 属性值
该事件在复选框选中或取消选中时触发。
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
<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>
</textarea>
</pre>

258
public/frontend/layui-main/docs/form/examples/form.demo.md Executable file
View File

@@ -0,0 +1,258 @@
<form class="layui-form" action="">
<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" placeholder="有值时才校验" 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="required|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="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</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">
</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">
&lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
</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>
<!-- import layui -->
<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: function(value) {
if (!/(.+){6,12}$/.test(value)) {
return '密码必须 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('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
}
});
});
</script>

109
public/frontend/layui-main/docs/form/examples/form.grid.md Executable file
View File

@@ -0,0 +1,109 @@
<form class="layui-form layui-row layui-col-space16">
<div class="layui-col-sm3">
<input type="text" name="A" placeholder="Field A" class="layui-input">
</div>
<div class="layui-col-sm3">
<div class="layui-input-wrap">
<input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-col-sm3">
<input type="text" name="C" placeholder="Field C" class="layui-input">
</div>
<div class="layui-col-sm3">
<input type="text" name="D" placeholder="Field D" class="layui-input">
</div>
<div class="layui-col-md6">
<div class="layui-form-item" style="margin-bottom: 0;">
<label class="layui-form-label">Field E :</label>
<div class="layui-input-block">
<input type="text" name="E" placeholder="请输入" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item" style="margin-bottom: 0;">
<label class="layui-form-label">Field F :</label>
<div class="layui-input-block">
<select name="quiz1">
<option value="">省份</option>
<option value="浙江">浙江省</option>
<option value="江西">江西省</option>
<option value="福建">福建省</option>
</select>
</div>
</div>
</div>
<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" name="G" value="" required placeholder="Field G" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<input type="text" name="H" required placeholder="Field H" id="demo-search-more" 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" name="I" required placeholder="Field I" class="layui-input demo-search-date">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-btn-container layui-col-xs12">
<button class="layui-btn" lay-submit lay-filter="demo-search">Search</button>
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var dropdown = layui.dropdown;
// 提交
form.on('submit(demo-search)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 下拉菜单
dropdown.render({
elem: '#demo-search-more',
data: [{
title: 'List A'
},{
title: 'List B'
},{
title: 'List C'
}],
click: function(obj, othis){
this.elem.val(obj.title);
},
style: 'width: 245px;'
})
// 日期
laydate.render({
elem: '.demo-search-date'
});
});
</script>

80
public/frontend/layui-main/docs/form/examples/form.login.md Executable file
View File

@@ -0,0 +1,80 @@
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
</div>
<div class="layui-form-item demo-login-other">
<label>社交账号登录</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
或 <a href="#reg">注册帐号</a>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo-login)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>

102
public/frontend/layui-main/docs/form/examples/form.pane.md Executable file
View File

@@ -0,0 +1,102 @@
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">长输入框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期选择</label>
<div class="layui-input-block">
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-inline">
<input type="text" name="number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">请务必填写用户名</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-inline">
<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" pane>
<label class="layui-form-label">开关-默认开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
</div>
</div>
<div class="layui-form-item" pane>
<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">
&lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
<!-- import layui -->
<script>
layui.use(['form'], function(){
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo2)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>

131
public/frontend/layui-main/docs/form/examples/form.reg.md Executable file
View File

@@ -0,0 +1,131 @@
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-reg-container">
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 11px;">
<button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
</div>
<div class="layui-form-item demo-reg-other">
<label>社交账号注册</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
<a href="#login">登录已有帐号</a>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
// 自定义验证规则
form.verify({
// 确认密码
confirmPassword: function(value, item){
var passwordValue = $('#reg-password').val();
if(value !== passwordValue){
return '两次密码输入不一致';
}
}
});
// 提交事件
form.on('submit(demo-reg)', function(data){
var field = data.field; // 获取表单字段值
// 是否勾选同意
if(!field.agreement){
layer.msg('您必须勾选同意用户协议才能注册');
return false;
}
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 普通事件
util.on('lay-on', {
// 获取验证码
'reg-get-vercode': function(othis){
var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
// 验证通过
if(isvalid){
layer.msg('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
}
});
});
</script>

113
public/frontend/layui-main/docs/form/examples/form.val.md Executable file
View File

@@ -0,0 +1,113 @@
<form class="layui-form" action="" 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">
&lt;textarea placeholder="请输入" class="layui-textarea" name="desc"&gt;&lt;/textarea&gt;
</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>
<!-- import layui -->
<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>

57
public/frontend/layui-main/docs/form/examples/form.validate.md Executable file
View File

@@ -0,0 +1,57 @@
<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>
<!-- import layui -->
<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>

52
public/frontend/layui-main/docs/form/examples/form.verify.md Executable file
View File

@@ -0,0 +1,52 @@
<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>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
// 自定义验证规则，如下以验证用户名和密码为例
form.verify({
// 参数 value 为表单的值；参数 item 为表单元素
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: function(value) {
if (!/^[\S]{6,12}$/.test(value)) {
return '密码必须为 6 到 12 位的非空字符';
}
}
});
// 提交事件
form.on('submit(demo-verify)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
})
</script>

40
public/frontend/layui-main/docs/form/examples/input.affix.custom.md Executable file
View File

@@ -0,0 +1,40 @@
<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>
<!-- import layui -->
<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>

84
public/frontend/layui-main/docs/form/examples/input.group.md Executable file
View File

@@ -0,0 +1,84 @@
<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>
<!-- import layui -->

96
public/frontend/layui-main/docs/form/examples/input.pre.suf.md Executable file
View File

@@ -0,0 +1,96 @@
<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>
<!-- import layui -->

418
public/frontend/layui-main/docs/form/index.md Executable file
View File

@@ -0,0 +1,418 @@
---
title: 表单组件 form
toc: true
---
# 表单组件 🔥
> 表单组件`form`是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。`form`是 Layui 最常用的组件之一。
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">综合演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合演示'}, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.demo.md") }}
</textarea>
</pre>
<h3 id="pane" lay-toc="{level: 2}">方框风格</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.pane.md") }}
</textarea>
</pre>
<h3 id="login" lay-toc="{level: 2}">登录模板 <sup>2.8+</sup></h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.login.md") }}
</textarea>
</pre>
<h3 id="reg" lay-toc="{level: 2}">注册模板 <sup>2.8+</sup></h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.reg.md") }}
</textarea>
</pre>
更多其他表单模板均可自由布局实现，为了避免影响文档其他重要版面的阅读，我们就不做过多演示了。
<h2 id="layout" lay-toc="{title: '布局'}">表单布局</h2>
### 🌕 普通布局
在上文的「[综合演示](#examples)」示例中，我们用的是 form 组件自身的普通布局。其要点为：
- 通过 `class="layui-form"` 定义一个表单域，通常设置在`<form>`标签上， 或普通`<div>` 标签亦可。
- 通过 `class="layui-form-item"` 定义一个块级元素的表单项容器
- 通过 `class="layui-form-label"` 定义标签
- 通过 `class="layui-input-block"` 定义表单项父容器为块级元素
- 通过 `class="layui-input-inline"` 或 `class="layui-inline"` 定义表单项父容器为行内块元素
即必须按照规定的层级定义相应的 `class`。
### 🌕 栅格布局
form 还可以借助*栅格*实现更灵活的响应式布局。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 500px;', done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.grid.md") }}
</textarea>
</pre>
<h2 id="api" lay-toc="{hot: 1}">API</h2>
| API | 描述 |
| --- | --- |
| var form = layui.form | 获得 `form` 模块。 |
| [form.render(type, filter)](#render) | 表单域组件渲染，核心方法。[#用法](#render) |
| [form.verify(obj)](#verify) | 自定义表单验证的规则。[#用法](#verify) |
| [form.validate(elem)](#validate) <sup>2.7+</sup> | 主动触发执行验证。[#用法](#validate) |
| [form.val(filter, obj)](#val) | 表单赋值或取值。 [#用法](#val) |
| [form.submit(filter, callback)](#submit) <sup>2.7+</sup> | 用于主动执行指定表单的提交。[#用法](#submit) |
| [form.on(\'event(filter)\', callback)](#on) | 事件。[#用法](#on) |
| [form.set(options)](#set) | 设置 form 组件全局配置项。 |
| form.config | 获取 form 组件全局配置项。 |
<h2 id="attr" lay-toc="{level: 2}">属性</h2>
在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 `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`必填项 <br>`phone`手机号 <br>`email`邮箱 <br>`url`网址<br>`number`数字<br>`date`日期<br>`identity`身份证<hr>`自定义规则值` | 设置表单项的验证规则，支持单条或多条规则（多条用`\|`分隔），如：<br>`lay-verify="required"` <br>`lay-verify="required\|email"`<br>`lay-verify="其他自定义规则值"` <hr>自定义规则的用法：[#详见](#verify)<hr>注：<sup>2.8.3</sup> 版本中调整了内置规则，不再强制必填。<br>如需保留必填，可叠加 `required` 规则，如： <br> `lay-verify="required\|number"` |
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格 |
<h2 id="render" lay-toc="{hot: true, level: 2}">渲染</h2>
`form.render(type, filter);`
- 参数 `type` 可选，对应表单组件类型，支持：`input,select,checkbox,radio`；若不填，则指向所有类型。
- 参数 `filter` 可选，对应 `class="layui-form"` 所在元素的 `lay-filter` 属性值，用于指定需渲染的表单区域。
### **常规渲染**
`form` 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对*动态插入*的表单元素的渲染。
```
<form class="layui-form" lay-filter="test">
动态插入的表单域
</form>
<!-- import layui -->
<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>
```
### **定向渲染** <sup>2.7+</sup>
该方法还允许指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：
- 若 jQuery 对象指向表单域容器（`class="layui-form"`），则渲染该表单域中的所有表单项；<sup>2.8+</sup>
- 若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染
定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用。
```
<div class="layui-form" id="form-id">
<select id="select-id">
<option value="a">A</option>
</select>
<!-- 其他表单元素 -->
</div>
<!-- import layui -->
<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 风格。
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
obj.render()
}}">
<textarea>
<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>
</textarea>
</pre>
<h2 id="lay-verify" lay-toc="{hot: true, level: 2}">验证</h2>
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` 属性的内置规则值可参考上文的：[#属性介绍](#attr)。 当表单提交时，会自动触发验证。
<h3 id="verify" lay-toc="{level: 3, title: '定义验证规则'}" class="ws-bold">自定义验证规则</h3>
`form.verify(obj);`
- 参数 `obj` 是一个对象，用于定义验证规则的集合。
当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如：
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.verify.md") }}
</textarea>
</pre>
更多「自定义验证规则」示例参考：
> - <a href="https://gitee.com/layui/layui/issues/I5HC2L#note_11673264_link" target="_blank">将 form 提示语显示在表单项旁边，并在提交时批量触发验证</a>
> - <a href="https://gitee.com/layui/layui/issues/I42C7I#note_12020414_link" target="_blank">重置 form 内置验证规则，让其：当非空值才进行验证；加了 required 时才验证非空</a>
<h3 id="validate" lay-toc="{level: 3}" class="ws-bold">主动触发验证 <sup>2.7+</sup></h3>
`form.validate(elem);`
- 参数 `elem` 为元素选择器或 jQuery 对象； 若验证通过，该方法将返回 true，否则返回 false
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.validate.md") }}
</textarea>
</pre>
<h2 id="val" lay-toc="{level: 2}">赋值/取值</h2>
`form.val(filter, obj);`
- 参数 `filter` 为表单域容器（`class="layui-form"`）的 `lay-filter` 属性值
- 参数 `obj` 可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
obj.render()
}}">
<textarea>
{{- d.include("/form/examples/form.val.md") }}
</textarea>
</pre>
<h2 id="submit" lay-toc="{hot: true, level: 2}">提交</h2>
表单的提交可以通过事件触发或方法触发
### **提交事件**
在表单域中，对指定按钮设置 `lay-submit` 属性，即意味着点击该按钮时，将触发提交事件。如：
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
obj.render()
}}">
<textarea>
<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>
<!-- import layui -->
<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>
</textarea>
</pre>
### **提交方法** <sup>2.7+</sup>
`form.submit(filter, callback);`
- 参数 `filter` 为表单域容器的 `lay-filter` 属性值
- 参数 `callback` 为执行提交事件后的回调函数
使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
obj.render()
}}">
<textarea>
<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>
<!-- import layui -->
<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>
</textarea>
</pre>
<h2 id="on" lay-toc="{}">事件</h2>
`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);
});
```
<h2 id="set" class="ws-anchor">全局设置</h2>
`form.set(options);`
- 参数 `options` : 全局属性配置项。详见下表：
| 属性名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autocomplete | 设置 input 框的 `autocomplete` 属性初始值 | string | - |
该方法用于对 form 组件进行全局设置。
```
form.set({
autocomplete: 'off' // 阻止 input 框默认的自动输入完成功能
});
```

229
public/frontend/layui-main/docs/form/input.md Executable file
View File

@@ -0,0 +1,229 @@
---
title: 输入框 / 文本域
toc: true
---
# 输入框
> 输入框组件是对文本框`<input type="text">`和多行文本框`<textarea>`元素的扩展
<h2 id="text" lay-toc="">普通输入框</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<input type="text" name="" placeholder="文本框" class="layui-input">
<hr class="ws-space-16">
&lt;textarea name="" placeholder="多行文本框" class="layui-textarea"&gt;&lt;/textarea&gt;
</div>
</textarea>
</pre>
<h2 id="wrap" lay-toc="{hot: true}">输入框点缀 <sup>2.8+</sup></h2>
输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：*容器、前缀、输入框、后缀*。
```
<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 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容。
<h3 id="group" lay-toc="{level: 2}" class="ws-bold">前置和后置</h3>
前置和后置结构是*输入框的自适应结构*，可以很灵活地控制前后置内容与输入框的宽度比例。
- 结构：
```
<div class="layui-input-group">
<div class="layui-input-prefix">前置内容</div>
<input type="text" class="layui-input">
<div class="layui-input-suffix">后缀内容</div>
</div>
```
- 示例：
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
{{- d.include("/form/examples/input.group.md") }}
</textarea>
</pre>
<h3 id="pre-suf" lay-toc="{level: 2}" class="ws-bold">前缀和后缀</h3>
输入框前缀和后缀是*输入框的纯修饰结构*，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身。
- 结构：
```
<div class="layui-input-wrap">
<div class="layui-input-prefix">前缀图标</div>
<input type="text" class="layui-input">
<div class="layui-input-suffix">后缀图标</div>
</div>
```
- 示例：
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;',layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
{{- d.include("/form/examples/input.pre.suf.md") }}
</textarea>
</pre>
注意「前置和后置」与「前缀和后缀」 二者使用时切勿混淆。
<h2 id="affix" lay-toc="{hot: true}">动态点缀 <sup>2.8+</sup></h2>
该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 `lay-affix` 属性来开启动态点缀。
| 点缀 | 属性值 |
| --- | --- |
| [数字输入框](#affix-number) <sup>2.8.9+</sup> | `lay-affix="number"` |
| [密码框显隐](#affix-eye) | `lay-affix="eye"` |
| [内容清除](#affix-clear) | `lay-affix="clear"` |
| [自定义动态点缀](#affix-custom) | `lay-affix="customName"` |
<h3 id="affix-number" lay-toc="{level: 2, hot: true}" class="ws-bold">
数字输入框 <sup>2.8.9+</sup>
</h3>
一般搭配 `<input type="number">` 使用，用于替代原生数字输入框，可继承 `step,min,max` 等原生属性。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<input type="number" lay-affix="number" placeholder="" value="0" class="layui-input">
<hr class="ws-space-16">
<div class="layui-row layui-col-space16">
<div class="layui-col-xs6">
<input type="number" lay-affix="number" placeholder="设置 step 为 0.01" step="0.01" class="layui-input">
</div>
<div class="layui-col-xs6">
<input type="number" lay-affix="number" placeholder="设置 step,min,max" step="10" min="0" max="100" class="layui-input">
</div>
<div class="layui-col-xs6">
<input type="number" lay-affix="number" readonly placeholder="不允许输入状态" class="layui-input">
</div>
<div class="layui-col-xs6">
<input type="number" lay-affix="number" disabled placeholder="禁用状态" class="layui-input">
</div>
</div>
</div>
<!-- import layui -->
</textarea>
</pre>
<h3 id="affix-eye" lay-toc="{level: 2}" class="ws-bold">密码显隐</h3>
一般搭配 `<input type="password">` 使用，用于控制输入框内容的显示和隐藏。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<div class="layui-input-wrap">
<input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
</div>
</div>
<!-- import layui -->
</textarea>
</pre>
<h3 id="affix-clear" lay-toc="{level: 2}" class="ws-bold">内容清除</h3>
一般搭配 `<input type="text">` 使用，用于清除输入框的内容。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
<h3 id="affix-custom" lay-toc="{level: 2}" class="ws-bold">自定义动态点缀</h3>
我们还可以对 `lay-affix` 属性设置任意图标值，从而实现自定义动态点缀功能。 其中 `lay-affix="customName"` 值对应图标类`layui-icon-`后面的名称（[#详见图标列表](../icon/#list)）。且可通过「[点缀事件](#affix-event)」完成自定义操作。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
obj.render();
}}">
<textarea>
{{- d.include("/form/examples/input.affix.custom.md") }}
</textarea>
</pre>
输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。
<h3 id="on" lay-toc="{level: 2}" class="ws-bold">点缀事件</h3>
`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 属性值
console.log(this); // 当前触发点缀事件的图标元素
});
```

108
public/frontend/layui-main/docs/form/radio.md Executable file
View File

@@ -0,0 +1,108 @@
---
title: 单选框
toc: true
---
# 单选框
> 单选框组件是对 `<input type="radio">` 元素的美化替代。
<h2 id="normal" lay-toc="{}">普通单选框</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
- 属性 `title` 可设置单选框标题
- 属性 `checked` 可设置默认选中
- 属性 `disabled` 可设置禁用状态
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
在 `radio` 元素后的相邻元素设置特定属性 `lay-radio`，可以与 `radio` 标题进行绑定。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
`form.on('radio(filter)', callback);`
- `radio` 为单选框事件固定名称
- `filter` 为单选框元素对应的 `lay-filter` 属性值
该事件在单选框被点击或选中时触发。
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
<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>
</textarea>

210
public/frontend/layui-main/docs/form/select.md Executable file
View File

@@ -0,0 +1,210 @@
---
title: 选择框
toc: true
---
# 选择框
> 选择框组件是对 `<select>` 元素的美化替代，延续了原有的特性，且加入了搜索等扩展。
<h2 id="normal" lay-toc="{}">普通选择框</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
- 若第一项 `value` 为空，通常只作为选择框提示性引导；若第一项 `value` 不为空，则作为默认选中项。
- 通过给选项添加 `selected` 属性优先设置默认选中项。
- 通过给 `<select>` 或 `<option>` 标签设置 `disabled` 可禁用整个选择框或某个选项。
在 `<select>` 标签上同样支持设置表单的其他公共属性（[#详见](./#attr)）。
<h2 id="group" lay-toc="{}">分组选择框</h2>
通过 `<optgroup>` 标签给选择框分组
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
<h2 id="search" lay-toc="{hot: true}">搜索选择框</h2>
在 `<select>` 元素上设置 `lay-search` 可开启选择框的搜索功能
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">选择框事件</h2>
`form.on('select(filter)', callback);`
- `select` 为选择框事件固定名称
- `filter` 为选择框元素对应的 `lay-filter` 属性值
该事件在选择框选项选中后触发。
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<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>
<!-- import layui -->
<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>
</textarea>
</pre>