validate 动态返回错误信息
程序员文章站
2022-05-24 10:45:42
...
引入相关js
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/theme/ajax/libs/validate/jquery.validate.js}"></script>
<script th:src="@{/theme/ajax/libs/validate/validate-methods.js}"></script>
<script th:src="@{/theme/ajax/libs/validate/messages_zh.min.js}"></script>
<script th:src="@{/theme/ajax/libs/validate/old/jquery.validate.extend.js}"></script>
示例
<div class="form-group">
<label class="col-sm-3 control-label">部门名称:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="deptName" id="deptName" required>
</div>
</div>
$("#form-dept-add").validate({
onkeyup: false,
rules:{
deptName:{
required: true,
checkDeptUnique :true //自定义addMethod方法
/* 不用这种方式,不能自定义返回信息
remote: {
url: ctx + "system/SysDeptController/checkDeptUnique",
type: "post",
dataType: "json",
data: {
"parentId": function() {
return $("input[name='parentId']").val();
},
"deptName" : function() {
return $.common.trim($("#deptName").val());
}
},
dataFilter: function(data, type) {
data = JSON.parse(data);
msgs = data.msg;
return {success:true,messages:"222"};
//return $.validate.unique(data.code);
}
} */
},
orderNum:{
digits:true
},
email:{
email:true,
},
phone:{
isPhone:true,
},
},
messages: {
deptName: {
required: "已存在"
}
/* "deptName": {
remote: msgs
} */
},
focusCleanup: true
});
addMethod新增
validate-methods.js
...
//校验部门唯一
jQuery.validator.addMethod("checkDeptUnique", function (value, element, param) {
var flag = true ;
var result = '' ;
$.ajax({
url: ctx + "system/SysDeptController/checkDeptUnique",
data : {
deptName : value,
"parentId": function() {
return $("input[name='parentId']").val();
},
},
async : false,
type: "post",
dataType: "json",
success : function(data) {
if(data.code == "0" || data.code == 0 ) {
flag = true;
}else{
flag = false ;
result = data.msg ;
}
}
});
$.validator.messages.checkDeptUnique = result;
return flag;
}) ;
相关java返回值示例, AjaxResult为自定义的返回类
/**
* 校验部门名称 或 部门code
*/
@PostMapping(value="/checkDeptUnique",produces="application/json;charset=UTF-8")
@ResponseBody
public AjaxResult checkDeptNameUnique(SysDept dept) {
if (StringUtils.isNull(dept.getDeptName()) ||
StringUtils.isEmpty(dept.getDeptName())) {
return AjaxResult.warn("缺少参数deptName", dept);
}
dept = iSysDeptService.checkDeptNameUnique(dept);
if (dept != null) {
return new AjaxResult(Type.ERROR, "存在重复数据", dept);
}
return AjaxResult.success();
}
//返回示例对象
{"msg":"存在重复数据","code":500,"data":{"deptName":"123","deptCode":null}}
上一篇: Python自动化之ajax返回表单验证的错误信息和序列化扩展
下一篇: spring普通属性注入
推荐阅读
-
学习动态网页技术PHP中参数引用返回的实例
-
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
-
动态SQL中返回数值的实现代码
-
动态SQL中返回数值的实现代码
-
为什么ASP中执行动态SQL总报错误信息?提示语句语法错误
-
动态webservice调用接口并读取解析返回结果
-
SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录
-
用RestTemplate调取接口,取得返回数据,携带header,动态拼接url ,动态参数
-
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
-
vue中如何动态绑定图片,vue中通过data返回图片路径的方法