BootstrapVue VeeValidate - 当表单无效时显示额外的错误消息

Question

我在我的 Laravel + Vue.js SPA（单页应用程序）中使用 BootstrapVue 和 VeeValidate。当表单字段无效时，它会自动显示相应位置的错误。但我需要一种方法，以便每当任何表单输入无效时，我都可以在 div 内显示一条消息（即“无效数据”），id result 就在 form 上方。

我的Register.vue 组件具有以下形式：

<template>

    <ValidationObserver ref="form" v-slot="{ passes }">

        <div id="registration_form">
            <div id="page_header" class="text-center" >Register</div>
        <div id="result" v-html="result" class="result text-center"></div>

        <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">



            <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
                <b-form-group
                        label="User Name:"
                        label-for="exampleInput1"

                >
                    <b-form-input
                            type="text"
                            disable-leading-trailing-space
                            v-model="name"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter your name"
                    ></b-form-input>
                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
                </b-form-group>
            </ValidationProvider>


            <ValidationProvider vid="email" rules="required|email" name="Email" v-slot="{ valid, errors }">
                <b-form-group
                        label="Email address:"
                        label-for="exampleInput1"
                        description="We'll never share your email with anyone else."
                >
                    <b-form-input
                            type="email"
                            disable-leading-trailing-space
                            v-model="email"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter email"
                    ></b-form-input>
                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
                </b-form-group>
            </ValidationProvider>

        <b-button type="submit" variant="primary">Submit</b-button>
            <b-button type="reset" variant="danger">Reset</b-button>
        </b-form>

        </div><!-- end of id registration_form-->
    </ValidationObserver>
</template>

JS部分有：

<script>
    import { ValidationObserver, ValidationProvider } from "vee-validate";

    export default {
        name: "Register",
        components: {
            ValidationObserver,
            ValidationProvider
        },
        data: () => ({
            name: "",
            email: "",
            result:''
        }),
        methods: {
            onSubmit() {
                console.log("Form submitted yay!");
            },
            resetForm() {
                this.name = "";
                this.email = "";

                requestAnimationFrame(() => {
                    this.$refs.form.reset();
                });
            }
        }
    }; 
</script>

当任何form 输入处于无效状态时，我想在div 中显示id result 消息“无效数据”。

有没有像beforeSubmit 这样的事件或任何其他方式来实现？

编辑： 每当前端发生任何验证错误时，我还想将窗口滚动到顶部（window.scrollTo(0,0)）。该怎么做？

Answer 1

从ValidationObserver 插槽道具中获取failed 状态：

<ValidationObserver ref="form" v-slot="{ failed, passes }">
  <div v-if="failed">Invalid Data</div>

<!-- rest of your fields -->
</ValidationObserver>