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

【问题标题】：VeeValidate v3: How to handle backend validation messages?VeeValidate v3：如何处理后端验证消息？
【发布时间】：2020-01-06 13:16:01
【问题描述】：

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

以前（参见下面的代码），我只是在运行客户端验证，如果通过，则调用服务器验证路由，如果失败，我将使用 VeeValidate 中的 errors.add 函数。

任何帮助将不胜感激。只需要知道在 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]
                    });
                });
            });

    }
});

}

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

我还在 Github for VeeValidate 中发布了一个问题，并得到了答案。

在撰写本文时，相关文档隐藏在示例部分中： 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

【讨论】：

链接失效

【解决方案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>

【讨论】：