1、使用
<form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
</form>
2、更新渲染 表单元素是动态插入时, Form模块 的自动化渲染是会对其失效的,解决方法如下:
form.render(type, filter);
(1)type,为表单的type类型,可选。默认对全部类型的表单进行一次更新,可局部刷新的type如:select、checkbox、radio。
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
(2)filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。可以借助该参数,对表单完成局部更新。
3、预设元素属性
4、事件监听
语法:form.on('event(过滤器值)', callback);
使用layui.onevent()自定义模块事件时
(1)监听select选择 下拉选择框被选中时触发,回调函数返回一个object参数,携带两个成员:
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
(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)监听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对象
});
(4)监听radio单选 radio单选框被点击时触发,回调函数返回一个object参数,携带两个成员:
form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
(5)监听submit提交 按钮点击或者表单被执行提交时触发,其中回调函数只有在验证全部通过后才会进入,回调返回三个成员:
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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
5、表单验证 我们对表单的验证进行了非常巧妙的支持,大多数时候你只需要在表单元素上加上lay-verify="value"即可。如:
<input type="text" lay-verify="email">
还同时支持多条规则的验证,如下:
<input type="text" lay-verify="required|phone|number">
6、除了内置的校验规则外,你还可以自定义验证规则,通常对于比较复杂的校验,这是非常有必要的。
(1)定义:
form.verify({
username: function(value, item){ //value:表单的值、item:表单的DOM对象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
}
//我们既支持上述函数式的方式,也支持下述数组的形式
//数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位,且不能出现空格'
]
});
(2)使用
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">