<form class="layui-form"></form>
1.class="layui-form",加上这个class,layui就会认为他是一个form表单,即使把form标签换成其他的元素
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
2.使用form表单提交时,我们的每一个input框都可以使用这个样式,其中autocomplete=''off'所代表的的意思是我们在浏览器中输入表单信息的时候,往往input输入框会记录下之前提交表单的信息,以后每次只要双击 input文本输入框就会出现之前输入的文本,这样有时会觉得比较方便,不想启用就off
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
3.提交按钮我们可以使用这个模板,其中lay-submit只针对提交按钮使用,也就是只要加上这个属性,那么他就是提交按钮(之前做点击重置按钮会刷新列表功能时,将这个属性添加到重置button中,点击重置就会验证数据不能为空,就是这个原因), lay-filter="" 的值,4你可以借助该参数,对表单完成局部更新。type="reset",我理解的为:用在重置按钮上,可以清空我们form表单的数据。
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
4.点击编辑时将这条数据反显回<select>标签里,遇到一个问题:select下拉框已经默认选中‘女’,但是下拉框里面还是显示‘男’,这是因为表单元素是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。你只需要执行 form.render(type, filter); 方法即可。(vue的双向绑定机制下可能不存在这个问题),其中type指的是表单的type类型,默认对全部类型的表单进行一次更新。可局部刷新的 type有:select,checkbox,radio,第二个参数filter的使用方法如下
<div class="layui-form" lay-filter="test1">
…
</div>
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
5.事件触发
默认只支持下面的几种触发事件
//语法:
form.on('event(过滤器值)', callback);
//用例
//会对所有select下拉框触发
form.on('select', function(data){
console.log(data);
})
//只针对会select下拉框lay-filter='test'触发
form.on('select(test)', function(data){
console.log(data);
});;
6.表单的验证
只需要在表单元素上加上 lay-verify="" 属性值即可。直接可以使用的主要有:email,require,number,phone 等,如:
<input type="text" lay-verify="email">
还同时支持多条规则的验证,如下:
<input type="text" lay-verify="required|phone|number">
当然支持自定义验证
<input type="text" lay-verify="username" placeholder="请输入用户名">
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 '用户名不能全为数字';
}
})
7.表单的取值和赋值
取值:var data1 = form.val("formTest"),赋值:var data1 = form.val("formTest",data);
其中data要符合josn格式,简单来说没有data就是取值,有data就是赋值
//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"username": "贤心" // "name": "value"
,"sex": "女"
,"auth": 3
,"check[write]": true
,"open": false
,"desc": "我爱layui"
});
//获取表单区域所有值
var data1 = form.val("formTest");