首先,这里是一个 ajax(axios) 请求的自定义表单验证:

// 自定义表单验证
const customValidator = (rule, value, callback) => {
	axios.get(\'url\', { params }).then(res => {
		if (res) {
			callback();
		} else {
			callback(new Error(\'错误\'));
		}
	})
};

这个是Form表单的部分代码:

<Form ref=\"myForm\" :model=\"formModel\" :rules=\"formRules\"></Form>

这个是问题代码

// 返回各种验证操作的结果
myValidate() {
	let isValid = true;
	isValid = this.otherValidate(); // 可能不止一个验证函数
	if (isValid) {
		// 这个表单验证肯定是异步的,毕竟我们自定义的表单验证是一个ajax请求
		// 所以这么写是没有办法等到 valid 赋值给 isValid 的
		// 这就导致了这里的验证形同虚设
		this.$refs.myForm.validate(valid => {
			isValid = valid;
		});
	}
	return isValid;
}

问题修复:

myValidate() {
	let isValid = true;
	isValid = this.otherValidate(); // 可能不止一个验证函数
	if (isValid) {
		// 经过console.log 发现validate是一个Promise,这就好办了,直接返回它,并且里面的值也一并返回
		return this.$refs.myForm.validate(valid => {
			return valid;
		});
	} else {
		return false;
	}
}

executeFunc() {
	let rslt = this.myValidate();
	if (rslt !== false) { // rslt 不是false 那就是Promise
		rslt.then(res => {
			if (res) {
				// doSomething 就这样就OK了
			}
		});
	}
}

END

收藏 打印