19.表单模块
学习要点：
本节课我们来开始了解 Layui 的内置模块：表单模块。
一．表单模块
1. 在之前的表单页面元素的课程中，我们已经学会了创建核心表单；
2. 而表单模块的这节课，主要探讨它更多交互和监听部分的功能设置；
3. 先看下表单支持的一些属性，下面列出重点，详情参考手册；
属性名
属性值
描述
title
任意字符
设置元素名称，一般 checkbox 和 radio
lay-skin
switch/primary
定义开关风格
lay-verify
各种值，参考手册
比如： required( 必填 ) ， email( 邮箱 ) 等
lay-filter
任意字符
事件过滤器，用于匹配和绑定元素
lay-submit
无
绑定提交按钮
4. 对于表单的事件监听，有以下几种：
事件名
描述
select
监听 select 下拉事件
checkbox
监听 checkbox 复选框事件
switch
监听 checkbox 开关事件
radio
监听 radio 单选框事件
submit
监听表单提交事件
PS ：事件监听的语法： form.on('event( 过滤器值 )', callback);
// 监听下来菜单，这里 test 是在 select 元素设置 lay-filter="test"
form . on ( 'select(test)' , ( data ) => {
console . log ( data )
//data.elem 原始 DOM，data.othis 美化 DOM
})
// 点击 checkbox ，判断是否选中
form . on ( 'checkbox(test2)' , ( data ) => {
console . log ( data . elem . checked )
})
5. 表单赋值 / 取值的操作：
// 给表单集中赋值
form . val ( 'form' , {
'username' : 'Mr.Lee'
})
< input type ="text" name ="username">
6. 表单有默认提供的验证规则，如果要自定义验证，如下：
// 自定义验证
form . verify ({
username ( value , item ) {
console . log ( value )
if ( value !== 'Mr.Lee' ) {
return ' 输入的值不符 ~'
}
}
})
< input type ="text" lay-verify ="username">