iView 自定义表单验证validator 异步校验_iview form 单个异步校验-优快云博客

本文链接：https://blog.youkuaiyun.com/Headmaster_Tan/article/details/85101950

本文介绍了如何在iView中实现自定义表单验证，特别是利用axios进行异步验证的过程。通过展示Form表单的代码段和问题解决方案，帮助读者理解并解决此类验证问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，这里是一个 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了
            }
        });
    }
}