Layui表单自定义验证结合Ajax同步请求的实现方案
作者:桌面漫游时间:2026-10-23 10:56:11浏览:578
本文介绍Layui表单中使用form.verify进行自定义验证时,通过Ajax查询后台重复数据的常见陷阱。重点解决异步请求导致验证结果返回延迟或丢失的问题,通过将Ajax设置为同步模式并在请求结束后直接return提示信息,确保验证流程正确执行。
Layui表单验证与Ajax结合的问题
在使用Layui表单进行自定义验证,并通过Ajax查询后台数据时,将form.verify与Ajax结合使用可能会遇到一些异常现象。
首先,可能会出现需要点击两次提交按钮才能看到验证结果的情况。
其次,有时后台返回的数据正常,但前端并未显示验证提示。经过排查发现,问题出在Ajax请求的异步特性上。正确的做法是将Ajax请求改为同步模式,并在Ajax请求结束后直接return验证提示信息,而不是在success或error回调函数中return。
form.verify同步验证实现代码
form.verify({
account: function(value, item){ //value:表单的值、item:表单的DOM对象
if(value.trim() == ""){
return '账号不能为空';
}
var param = {
employeeId: $("#hidEmployeeId").val(),
employeeAccount: $("#employeeAccount").val()
}
var checkResult = "";
$.ajax({
url: "../../selectEmpIdByAccount",
type: "GET",
data: param,
async: false,
success: function(result) {
if(result.extend.isRepeat){
checkResult = "该账号已存在";
}
},
error: function() {
}
});
return checkResult;
}
});
以上关于Layui自定义验证结合Ajax查询后台重复数据的示例分享完毕,希望能为读者提供参考。
作者最新文章
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系:辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比:哪款JS在线运行工具更适合你?
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查?常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29
