下面是关于 layui 自定义验证，用 AJAX 查询后台是否有重复数据，form.verify 的例子的完整攻略。
1. 准备工作
在制作这个例子之前，我们需要先安装好 layui，以及后端接口，这里使用 Node.js + Express 作为示例，同时需要使用到 MySQL 数据库，这里使用到了 sequelize 库进行数据库的连接和操作。
安装完所有依赖库之后，我们需要在 form 页面中引入 layui 的 JS 和 CSS 文件：
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
2. 实现功能
我们的需求是：在 layui 中的 form 表单中输入信息后，需要进行 AJAX 请求后端接口验证输入的值是否存在重复，如果存在重复，则提示用户重新输入，否则提交表单。
接下来，我们分别讲解前后端代码实现。
2.1 前端实现
首先，我们需要在表单中定义一个 input 标签，并为其添加一个 id，用于提交前获取输入的值。同时，我们需要为表单添加一个 lay-filter 属性，用于在 JS 代码中进行验证。
<form class="layui-form" lay-filter="form-demo">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
</div>
</form>
然后，我们需要编写一个 JS 代码来进行表单验证。代码中，我们主要使用 layui 的 form 模块，通过 form.verify 函数进行表单的自定义验证。
<script>
layui.use('form', function () {
var form = layui.form;
form.verify({
'username': function (value, item) {
var flag = false; // 标志位，验证通过为 false，验证失败为 true
// AJAX 请求后端接口验证用户名是否存在
$.ajax({
url: '/checkUserName', // 后台接口地址
type: 'post', // 请求方式
dataType: 'json', // 返回数据类型
data: { // 请求参数
'username': value
},
async: false, // 使用同步请求，防止页面跳转
success: function (response) {
if (response.code !== 200) {
flag = true;
}
}
});
if (flag) {
return '用户名已被占用';
}
}
});
form.on('submit(form-submit)', function (data) {
alert('表单提交成功');
// TODO 表单提交成功后的其他操作
});
});
</script>
在以上代码中，我们通过 form.verify 函数进行表单验证。当输入的用户名存在时，会返回一个字符串 '用户名已被占用'，从而通过验证。如果验证不通过，则会弹出相应的验证失败提示。
当表单验证通过后，form.on 函数会监听表单的提交事件，这里我们只是弹出了一个提示。
2.2 后端实现
接下来，我们需要在后端实现一个接口用于查询用户名是否重复。这里使用到了 sequelize 库，详情可以参考官方文档。
app.post('/checkUserName', function(req, res) {
// 查询数据库中的用户名是否重复
UserModel.findOne({
where:{
username:req.body.username
}
}).then(user => {
if (user) {
res.send({
'code': 400,
'msg': '该用户名已存在'
});
} else {
res.send({
'code': 200,
'msg': '用户名可用'
});
}
});
});
以上代码中，我们首先通过 req.body 获取到前端传来的用户名，然后利用 findOne 函数查询数据库中是否已存在该用户名。如果已存在，则返回 {code: 400, msg: '该用户名已存在'}；否则返回 {code: 200, msg: '用户名可用'}。
3. 示例说明
下面，我们以一个注册页面为例，进行了两个示例说明，分别是：
- 当输入的用户名已经存在时，会提示“用户名已被占用”；
- 当输入的用户名还未存在时，表单可以提交成功。
示例代码如下所示：
// 示例1：当输入的用户名已经存在时，会提示“用户名已被占用”
<form class="layui-form" lay-filter="form-demo">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
</div>
</form>
<script>
layui.use('form', function () {
var form = layui.form;
form.verify({
'username': function (value, item) {
var flag = false; // 标志位，验证通过为 false，验证失败为 true
// AJAX 请求后端接口验证用户名是否存在
$.ajax({
url: '/checkUserName', // 后台接口地址
type: 'post', // 请求方式
dataType: 'json', // 返回数据类型
data: { // 请求参数
'username': value
},
async: false, // 使用同步请求，防止页面跳转
success: function (response) {
if (response.code !== 200) {
flag = true;
}
}
});
if (flag) {
return '用户名已被占用';
}
}
});
form.on('submit(form-submit)', function (data) {
alert('表单提交成功');
// TODO 表单提交成功后的其他操作
});
});
</script>
// 示例2：当输入的用户名还未存在时，表单可以提交成功
<form class="layui-form" lay-filter="form-demo">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
</div>
</form>
<script>
layui.use('form', function () {
var form = layui.form;
form.verify({
'username': function (value, item) {
var flag = false; // 标志位，验证通过为 false，验证失败为 true
// AJAX 请求后端接口验证用户名是否存在
$.ajax({
url: '/checkUserName', // 后台接口地址
type: 'post', // 请求方式
dataType: 'json', // 返回数据类型
data: { // 请求参数
'username': value
},
async: false, // 使用同步请求，防止页面跳转
success: function (response) {
if (response.code !== 200) {
flag = true;
}
}
});
if (flag) {
return '用户名已被占用';
}
}
});
form.on('submit(form-submit)', function (data) {
alert('表单提交成功');
// TODO 表单提交成功后的其他操作
});
});
</script>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子 - Python技术站
微信扫一扫 
支付宝扫一扫 