主要的表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui.form</title>
<!-- css -->
<link rel="stylesheet" href="node_modules/layui/dist/css/layui.css">
</head>
<body>
<form action="" class="layui-form">
<!-- 1.输入框 input -->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" id="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 1. 密码框 input:password -->
<div class="layui-form-item">
<label for="" class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<!-- 2.下拉选择框 select -->
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="required">
<option value="0">写作</option>
<option value="1">阅读</option>
</select>
</div>
</div>
<!-- 3.复选框 checkbox -->
<div class="layui-form-item">
<label for="" class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" id="" title="写作">
<input type="checkbox" name="like[read]" id="" title="阅读">
</div>
</div>
<!-- 4.开关 关闭 switch -->
<div class="layui-form-item">
<label for="" class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="" id="" lay-skin="switch">
</div>
</div>
<!-- 4.开关 打开 switch -->
<div class="layui-form-item">
<label for="" class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="" id="" lay-skin="switch">
</div>
</div>
<!-- 5.单选框 radio -->
<div class="layui-form-item">
<label for="" class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" id="" value="0" title="男">
<input type="radio" name="sex" id="" value="1" title="女" checked>
</div>
</div>
<!-- 6.文本域 textarea-->
<div class="layui-form-item layui-form-text">
<label for="" class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="" id="" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<!-- 7.提交按钮 submit + 重置按钮 reset-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button class="layui-btn layui-btn-primary" type="reset">重置</button>
</div>
</div>
</form>
<script src="node_modules/layui/dist/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>一. 更新渲染
当表单元素是动态插入时，这时form模块的自动渲染会对其失效，需要添加form.render(type, filter); 方法。
第一个参数：type, 表单的type类型。 默认对全部类型的表单进行一次渲染，可局部刷新的type如下3个：
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
form.render('checkbox'); //刷新checkbox复选框(含开关)渲染
form.render('radio'); //刷新radio单选框渲染第二个参数：filter，为class="layui-form"所在元素的lay-filter=""的值， 可借助该参数，对表单完成局部更新
<div class="layui-form" lay-filter="test1">
..
</div>
<div class="layui-form" lay-filter="test2">
..
</div>
<script>
form.render(null, 'test1'); //更新lay-filter="test1"所在容器内的全部表单状态
form.render('select', 'test2'); //更新lay-filter="test2"所在容器内的全部select状态
</script>二. 预设元素属性
一些基础属性的配置安放在了标签本身上，简化了表单元素功能的js抒写。如：
三. 事件触发 form.on('event(过滤器值)', callback);
form模块在layui事件机制中注册了专属事件，form支持的事件如下：
默认，事件所触发的是全部form模块元素，但是如果只想触发某一个元素，使用事件过滤器即可。如：
form.on('select(test)', function(data){
console.log(data);
});3.1 触发select选择
下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});注：如果要触发所有的select，去掉过滤器filter。
3.2 触发checkbox复选
复选框点击勾选时触发，回调函数返回一个object对象，携带两个成员：
form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value的值，也可通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});3.3 触发switch开关
开关点击时触发，回调函数返回一个object对象，携带两个成员：
form.on('switch(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //开关value的值，也可通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});3.4 触发radio单选
radio单选框被点击时触发，回调函数返回一个object对象，携带两个成员：
form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});3.5 触发submit提交
按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回3个成员：
form.on('submit(*)', function(data){ //*为事件过滤器的值，是绑定元素时自定义的
console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field); //当前容器的全部表单字段，名值对形式：{name:value}
return false; //阻止表单跳转，如果需要表单跳转，去掉即可
});四. 表单赋值/取值 form.val('filter', object);
用于给指定表单集合的元素赋值和取值，如果object参数存在，则为赋值；如果object参数不存在，则为取值。
//给表单赋值
form.val("formTest", { //formTest为lay-filter的值
"username":"张三"; //"name":"value"
,"sex":"女"
,"auth":3
,"check[write]":true
,"open":false
,"desc":"I love you"
});
//获取表单区域所有值
var datal = form.val("formTest");