理解layui表单验证
首先确保验证的字段都在一个表单中，
<form class="layui-form-item layui-form" id="mainform">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">页面<span style="color:red;">*</span></label>
<div class="layui-input-inline">
<input type="text" name="page" id="page" autocomplete="off" lay-verify="required" lay-tips="页面不能为空！" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-inline" id="typelist">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="text-align:center;">
<span class="fb-btn" lay-filter="feedBack" lay-submit>提交</span>
</div>
</div>
</form>
2、
//自定义验证规则
lay-verify="required" 定义输入框选用哪种验证方式 lay-tips="页面不能为空！ 这个可以自定义提示方法
form.verify({
required: [
/[\S]+/
, '必填项不能为空'
]
, phone: [
/^1\d{10}$/
, '请输入正确的手机号'
]
,select: [
/[1-9]|\d{2,}/
, '必选项不能为空'
]
});
3、监听提交事件
feedBack 和提交按钮相对应
data 是表单中 数据值 注意是通过 name获取的
//监听提交
form.on('submit(feedBack)', function (data) {
console.log(data);
console.log(data.field );
});
|