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

Question

我正在努力从 VeeValidate v2 升级到 v3。由于他们删除了 ErrorBag 概念，我正在努力弄清楚如何处理后端验证。

以前（见下面的代码），我只是运行客户端验证，如果通过，调用服务器验证路由，如果失败我会使用 errors.add 函数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

有人告诉我这将很快在适当的文档中更新。

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

Answer 2

上面fylzero的回答是正确的。重要的一点是确保验证提供程序中的vid（下面是'testinput'）与服务器返回的错误对象中的键匹配。然后你发现错误：

<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>

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

VeeValidate v3: How to handle backend validation messages?

vue.js

vee-validate