VeeValidate v3:如何处理后端验证消息？

Question

我正在进行从VeeValidate v2升级到v3的工作。因为他们已经删除了ErrorBag的概念，所以我很难弄清楚如何处理后端验证。

以前(请参阅下面的代码)，我只是在运行客户端验证，如果通过了，就调用服务器验证路由，如果失败，我将只在VeeValidate中使用VeeValidate函数。

任何帮助都将不胜感激。只需要知道如何在VeeValidate v3中完成后端验证处理。谢谢!

validateStep(step) {

    this.$validator.validateAll(step).then((result) => {

        // If client-side validation passes, move into this block.
        if (result) {

            // Then run server-side validation.
            axios
                .post(`/ajax/validate-stuff`, this.postData)

                // If server-side validation Passes:
                .then(function (response) {
                    // Do the things
                })

                // If server-side validation Fails:
                .catch(function (error) {
                    // Add errors to VeeValidate Error Bag
                    var entries = Object.entries(error.response.data.errors);
                    entries.forEach(function(item, index) {
                        this.Errors.add({
                            field: item[0],
                            msg: item[1][0]
                        });
                    });
                });

        }
    });

}

Answer 1

我还在VeeValidate的Github中发布了一个关于这个问题的文章，并得到了答案。

在撰写本文时，这方面的文档被埋在示例部分：https://logaretm.github.io/vee-validate/examples/backend.html#server-side-rules中。

我听说不久将在适当的文件中更新这一情况。

更新链接：https://vee-validate.logaretm.com/v3/advanced/server-side-validation.html#handling-backend-validation

Answer 2

上面的fylzero的答案是正确的。重要的一点是确保验证提供程序中的vid (下面是'testinput')与服务器返回的error对象中的键匹配。然后捕获错误：

<validation-observer v-slot="{ invalid }" ref="formValidator">
    <form>
        <validation-provider
            v-slot="{ errors }"
            vid="testinput"
        >
            <input />
            <span>{{ errors[0] }}</span>
        </validation-provider>
    </form>
</validation-observer>

<script>
    try {
        // Make the api call here                   

    }
    catch (error) {
        // populate the vee-validate error manually
        this.$refs.formValidator.setErrors(error.data.errors);
    }
</script>