【layui-表单模块 layui.form学习】
主要的表单元素
layui.form
一. 更新渲染
当表单元素是动态插入时，这时form模块的自动渲染会对其失效，需要添加form.render(type, filter); 方法。
第一个参数：type, 表单的type类型。 默认对全部类型的表单进行一次渲染，可局部刷新的type如下3个：
| type值 | 描述 |
|---|---|
| select | 刷新select选择框渲染 |
| checkbox | 刷新checkbox复选框（含开关）渲染 |
| radio | 刷新radio单选框渲染 |
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
form.render('checkbox'); //刷新checkbox复选框(含开关)渲染
form.render('radio'); //刷新radio单选框渲染第二个参数：filter，为class="layui-form"所在元素的lay-filter=""的值， 可借助该参数，对表单完成局部更新
..
..
二. 预设元素属性
一些基础属性的配置安放在了标签本身上，简化了表单元素功能的js抒写。如：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| title | 任意字符 | 设定元素名称，一般用于checkbox，radio中显示内容 |
| lay-skin | switch（开关风格） primary（原始风格） |
定义元素的风格，目前只对checkbox元素有效 |
| lay-ignore | 任意字符或不设值 | 是否忽略元素美化处理。 设置后，将不会对该元素进行初始化渲染 |
| lay-filter | 任意字符 | 事件过滤器，主要用于事件的精确匹配，跟选择器比较类似。 不私属于form模块，在layui很多事件接口都可使用。 |
| lay-verify | required（必填） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值 |
同时支持多条规则的验证，语法格式：lay-verify="验证A\验证B" 如：layui-verify="required\phone\number". 出了内置的校验规则，还可设定任意的值，需借助form.verify()方法对该值进行一个校验规则的定义。 |
| lay-verType | tips（吸附层） alert（对话框） msg（默认） |
用于定义异常提示层模式 |
| lay-reqText | 任意字符 | 用于自定义必填项（设置lay-verify="required"的表单）的提示文本 |
| lay-submit | 无需填写值 | 绑定触发提交的元素，如button |
三. 事件触发 form.on('event(过滤器值)', callback);
form模块在layui事件机制中注册了专属事件，form支持的事件如下：
| event事件 | 描述 |
|---|---|
| select | 触发下拉选择事件 |
| checkbox | 触发复选框勾选事件 |
| switch | 触发复选框开关事件 |
| radio | 触发单选框事件 |
| submit | 触发表单提交事件 |
默认，事件所触发的是全部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");