Element或ant-design-vue的form表单校验方法validate不执行问题

Element或ant-design-vue的form表单校验方法validate不执行问题

引起问题的原因是：自定义的prop校验方法里，有些条件没有callback函数返回值

• element有问题的form表单示例代码如下（不完整代码）：

<template>
	<el-form
		:model="formModel"
		:rules="rules"
		ref="form"
	>
		<el-form-item label="姓名" prop="name">
	        <el-input
	          v-model="formModel.name"
	          placeholder="请输入姓名"
	          clearable>
	        </el-input>
	    </el-form-item>
		<el-form-item>
	        <el-button @click="submit">提交</el-button>
	        <el-button @click="close">取消</el-button>
      	</el-form-item>
	</el-form>
</template>
// 这里的自定义校验方法，埋了一个坑。也就是本篇文章讲解的问题所在之处。
const checkName= (rule, value, callback) => {
	const rexg = /校验名字的正则/
	 if (!value) {
	   callback(new Error("名称不能为空"));
	 } else if (!rexg.test(value)) {
		callback(new Error("名称不能xxxx"));
	 }
};
export default {
	data() {
		
		return {
			formModel: {
				name: ''
			},
			rules: {
				name: [
					{ validator: checkName, trigger: "blur" }
				]
			}
		}
	},
	methods: {
		submit() {
			this.$refs.form.validate((valid, errObj)=>{
				valid && console.log('表单校验通过')
			})
		}
	}
}

问题解析讲解

如上面的代码示例，如果我们的name input框，没有输入任何内容时，点击提交按钮，程序是正常的。submit方法里的validate方法也正常执行。

但当我们给input输入正常的值，checkName执行，不走进所有 if 块的时候，点击submit方法，我们会发现validate方法不会执行了。这就是因为，我们的checkName执行通过后，else没有执行 callback函数返回。告知validate函数。

所以，我们上面的代码，埋的坑是：checkName自定义校验方法，没有else里，执行callback。
把validate函数console出来，点击下查看源码就知道，validate函数里，会判断callback的执行结果，才会执行validate函数。而上面的代码，checkName执行所有条件通过时，没有加上else来执行callback

正确的代码，需每个条件有callback返回。

const checkName= (rule, value, callback) => {
	const rexg = /校验名字的正则/
	 if (!value) {
	   callback(new Error("名称不能为空"));
	 } else if (!rexg.test(value)) {
		callback(new Error("名称不能xxxx"));
	 } else {
		callback();
	}
};

这样，才不会当你的校验条件，走else时，由于没有callback响应，造成form表单的validate不执行