layui框架学习（41：表单模块）

  之前的文章《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/