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

iView 自定义表单验证validator 异步校验

程序员文章站 2024-03-12 20:10:14
...

首先,这里是一个 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

相关标签: iview