欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

 示例

validate 动态返回错误信息

<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}}