[JavaScript知识库]layui笔记2

理解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 );
});