之前的文章《layui框架学习》14-16中介绍了通过预设类及部分layui属性设置表单的外观样式，layui中还提供有表单模块以对表单元素进行各类动态化渲染和相关操作，本文学习并记录表单模块form的常用属性、函数及事件的用法（如果内容已在之前文章中涉及，则不在记录，避免重复）。
动态渲染。虽然通过预设类能够设置表单的样式，但在交互过程中，如果表单元素的内容发生变化（主要是下拉框、复选框、单选框），则需要调用form.render(type, filter)函数重新渲染表单元素样式，其中type的取值包括select、checkbox 、radio，filter指设置了lay-filter属性的表单，如果filter为空，则是重新渲染页面中所有表单中的指定type的表单元素。
自定义验证规则。表单中通过lay-verify属性设置元素的内容验证规则，除了layui内容的验证规则外（必填项、手机号、邮箱等），表单模块支持调用form.verify设置自定义规则，然后在lay-verify属性中指定自定义规则名称即可。自定义验证规则的使用示例及效果如下所示：
<div style="width: 600px;"><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="rsname" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">短信码</label><div class="layui-input-block"><input type="text" name="rsname" lay-verify="required|code" placeholder="请输入短信码" autocomplete="off" class="layui-input"></div></div> <div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-bg-red layui-btn-radius" lay-submit>提交</button></div></div></form>
</div><script>layui.use(['form','layer'], function(){var form = layui.form; form.verify({ username: function(value, item)//自定义验证规则可以为函数形式{ if(value === '机器猫'){return '用户名不能为机器猫';}} //也可以采用数组，第一个值为匹配正则表达式，第二个值为不匹配时的报错信息 ,code: [/^\d{4,6}$/,'短信码必须为4到6位的数字'] });});
</script>
select事件。下拉框中选择某一值后会触发select事件，通过form.on(‘select(filter)’, function(data))代码可以获取该事件并做响应处理。事件处理函数示例及截图如下所示：
<div style="width: 600px;"><form class="layui-form" action="">...<div class="layui-form-item layui-form-select"><label class="layui-form-label">选择城市</label><div class="layui-input-block input_city"><select name="type" lay-search=""><option value=""></option><optgroup label="河北省"><option value="0">石家庄</option><option value="1">秦皇岛</option></optgroup><optgroup label="四川省"><option value="2">成都</option><option value="3">广汉</option></optgroup><optgroup label="湖北省"><option value="4">武汉</option><option value="5">荆州</option></optgroup></select></div></div>...</div></form></div><script>layui.use(['form','layer'], function(){var form = layui.form; var layer = layui.layer; ... form.on('select()', function(data){layer.alert("选择的值为"+data.value)}); });</script>
checkbox 事件。勾选或取消勾选复选框时会触发checkbox 事件，通过form.on(‘checkbox(filter)’, function(data))代码可以获取该事件并做响应处理。事件处理函数示例及截图如下所示：
form.on('checkbox()', function(data){layer.alert("checked = "+data.elem.checked+ ",value = "+data.value)});
switch 事件。切换开关组件值时会触发switch 事件，通过form.on(‘switch(filter)’, function(data))代码可以获取该事件并做响应处理。事件处理函数示例及截图如下所示：
form.on('switch()', function(data)
{layer.alert("checked = "+data.elem.checked+ ",value = "+data.value)
});
radio 事件。单击某一单选框会触发radio 事件，通过form.on(‘radio(filter)’, function(data))代码可以获取该事件并做响应处理。事件处理函数示例及截图如下所示：
form.on('radio()', function(data)
{layer.alert("title = "+data.elem.title+",value = "+data.value)
});
表单赋值 / 取值函数。调用表单模块中的form.val(‘filter’, object)函数可以赋值/取值表单元素，如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。详细说明请见参考文献2-3，在此不再细说。
参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
