layui自定义验证
2019-12-26 本文已影响0人
王哈哈就很棒
自带验证
lay-verify
required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）
自定义值
自定义验证规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<h1>hello world</h1>
<form class="layui-form">
<div class="layui-form-item">
<input type="text"
name="name"
class="layui-input"
placeholder="请输入名称"
required
lay-verify="required">
</div>
<div class="layui-form-item">
<input type="text"
name="age"
class="layui-input"
placeholder="请输入年龄"
required
lay-verify="required|number">
</div>
<!--使用自定义验证-->
<div class="layui-form-item">
<input type="text"
name="data"
class="layui-input"
placeholder="请输入大于5的数字"
required
lay-verify="required|number|data_field">
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="test_form">提交</button>
</div>
</form>
</div>
<script src="layui/layui.all.js"></script>
<script>
var layer, form;
layui.use(['layer', 'form'], ()=>{
layer = layui.layer;
form = layui.form;
// 自定义验证
form.verify({
data_field: function(value, item){ //value：表单的值、item：表单的DOM对象
if(value < 5){
return '数字不能小于5'
}
}
});
// 提交表单
form.on('submit(test_form)', (data)=>{
layer.msg(JSON.stringify(data));
return false;
})
});
</script>
</body>
</html>
