一、预设元素属性
| 属性名 |
说明 |
| title |
设定元素名称，用于 checkbox、radio 框 |
| lay-skin |
定义元素的风格，目前只对 checkbox 元素有效 |
| lay-ignore |
是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格 |
| lay-filter |
事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。 |
| lay-verify |
表单验证，支持多条规则的验证。 |
| lay-verType |
用于定义异常提示层模式。 |
| lay-reqText |
用于自定义必填项（lay-verify="required"）的提示文本 |
| lay-submit |
绑定触发提交的元素，如 button |
1、title
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男" />
<input type="radio" name="sex" value="nv" title="女" checked />
<input type="radio" name="sex" value="" title="保密" disabled />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多选框</label>
<div class="layui-input-block">
<input type="checkbox" name="" title="天蓬" checked />
<input type="checkbox" name="" title="灭绝师太" />
<input type="checkbox" name="" title="欧阳克" disabled />
</div>
</div>
2、lay-skin
<div class="layui-form-item">
<label class="layui-form-label">多选框</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="primary" title="天蓬" value="1" />
<input type="checkbox" lay-skin="switch" title="灭绝师太" value="2" />
<input type="checkbox" title="欧阳克" value="3" />
</div>
</div>
3、lay-ignore
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select lay-filter="test1" lay-ignore>
<option value="">请选择一个老师</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" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" lay-ignore title="男" />
<input type="radio" name="sex" value="nv" lay-ignore title="女" checked />
<input type="radio" name="sex" value="" lay-ignore title="保密" disabled />
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">多选框</label>
<div class="layui-input-block">
<input lay-ignore type="checkbox" title="天蓬" value="1" />
<input lay-ignore type="checkbox" title="灭绝师太" value="2" />
<input lay-ignore type="checkbox" title="欧阳克" value="3" />
</div>
</div>
二、事件触发
- 语法：form.on('event(过滤器值)', callback);
| event |
描述 |
| select |
触发 select 下拉选择事件 |
| checkbox |
触发 checkbox 复选框勾选事件 |
| switch |
触发 checkbox 复选框开关事件 |
| radio |
触发 radio 单选框事件 |
| submit |
触发表单提交事件 |
1、select 触发下拉选择事件
- elem 得到 select 原始 DOM 对象
- value 得到被选中的值
- othis 得到美化后的 DOM 对象
<script>
layui.use('form', function(){
var form = layui.form;
form.on("select(test)", function (data) {
console.log(data);
});
});
</script>
- lay-filter="" 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select lay-filter="test1">
<option value="">请选择一个老师</option>
<option value="1">天蓬</option>
<option value="2">灭绝师太</option>
<option value="3">西门大官人</option>
<option value="4">欧阳克</option>
</select>
</div>
</div>
2、checkbox 触发复选框勾选事件
- elem 得到 checkbox 原始 DOM 对象
- elem.checked 是否被选中，true 或者 false
- value 复选框 value 值，也可以通过 elem.value 得到
- othis 得到美化后的 DOM 对象
<script>
layui.use("form", function () {
var form = layui.form;
form.on("checkbox(test2)", function (data) {
console.log(data);
});
});
</script>
<div class="layui-form-item" pane>
<label class="layui-form-label">多选框</label>
<div class="layui-input-block">
<input type="checkbox" lay-filter="test2" title="天蓬" value="1" />
<input type="checkbox" lay-filter="test2" title="灭绝师太" value="2" />
<input type="checkbox" lay-filter="test2" title="欧阳克" value="3" />
</div>
</div>
3、switch 触发复选框开关事件
- elem 得到 checkbox 原始 DOM 对象
- elem.checked 开关是否被选中，true 或者 false
- value 复选框 value 值，也可以通过 elem.value 得到
- othis 得到美化后的 DOM 对象
<script>
layui.use("form", function () {
var form = layui.form;
form.on("switch(test3)", function (data) {
console.log(data);
});
});
</script>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" lay-filter="test3" lay-skin="switch" />
</div>
</div>
4、radio 触发单选框事件
- elem 得到 radio 原始 DOM 对象
- value 被点击的 radio 的 value 值
<script>
layui.use("form", function () {
var form = layui.form;
form.on("radio(test4)", function (data) {
console.log(data);
});
});
</script>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input
type="radio"
name="test4"
lay-filter="test4"
value="1"
title="欧阳克"
/>
<input
type="radio"
name="test4"
lay-filter="test4"
value="2"
title="灭绝师太"
/>
<input
type="radio"
name="test4"
lay-filter="test4"
value="3"
title="西门大官人"
/>
</div>
</div>
5、submit 触发表单提交事件
- elem 被执行事件的元素 DOM 对象，一般为 button 对象
- form 被执行提交的 form 对象，一般在存在 form 标签时才会返回
- field 当前容器的全部表单字段，名值对形式：{name: value}
<script>
layui.use("form", function () {
var form = layui.form;
form.on("submit(submit)", function (data) {
console.log(data);
});
});
</script>
<button type="button" class="layui-btn" lay-submit lay-filter="submit">
提交
</button>
三、表单验证
- lay-verify 表单验证，支持多条规则的验证
| 属性名 |
说明 |
| required |
必填项 |
| phone |
手机号 |
| email |
邮箱 |
| url |
网址 |
| number |
数字 |
| date |
日期 |
| identity |
身份证 |
| 自定义值 |
自定义值 |
<input type="text" class="layui-input" lay-verify="required" />
<input type="text" class="layui-input" lay-verify="phone" />
<input type="text" class="layui-input" lay-verify="email" />
<input
type="text"
class="layui-input"
lay-verify="required"
lay-reqText="请输入php代码"
/>
- lay-verType 提示层模式：tips（吸附层）、alert（对话框）、msg（默认）
<input
type="text"
class="layui-input"
lay-verify="required"
lay-reqText="请输入php代码"
lay-verType="alert"
/>
四、更新渲染
- Layui 没有双向绑定机制，但是我们需要动态修改
<div class="layui-form-item">
<label class="layui-form-label">省市</label>
<div class="layui-input-inline">
<select lay-filter="test1">
<option value="">请选择省</option>
<option value="1">安徽</option>
<option value="2">北京</option>
<option value="3">江苏</option>
</select>
</div>
<div class="layui-input-inline">
<select lay-filter="test2" id="city">
<option value="">请选择市</option>
</select>
</div>
</div>
<script>
layui.use("form", function () {
var $ = layui.jquery;
var form = layui.form;
form.on("select(test1)", function (data) {
var option = '<option value="">请选择市</option>';
option += '<option value="1">合肥</option>';
option += '<option value="2">芜湖市</option>';
option += '<option value="3">蚌埠市</option>';
option += '<option value="4">淮南市</option>';
option += '<option value="5">马鞍山市</option>';
option += '<option value="6">淮北市</option>';
option += '<option value="7">铜陵市</option>';
option += '<option value="8">安庆市</option>';
$("#city").html(option);
form.render();
});
});
</script>
| 参数（type）值 |
描述 |
| select |
刷新 select 选择框渲染 |
| checkbox |
刷新 checkbox 复选框（含开关）渲染 |
| radio |
刷新 radio 单选框框渲染 |
- 参数 2：所在元素的 lay-filter="" 的值
form.render("select", "test2");
