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

Posted 2023-02-22

【中文标题】BootstrapVue VeeValidate - 当表单无效时显示额外的错误消息

【英文标题】：BootstrapVue VeeValidate - show an extra error message when form is invalid

【发布时间】：2020-04-16 16:12:24

【问题描述】：

我在我的 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)）。该怎么做？

【问题讨论】：

在 veevalidate 网站上，提交前有一个验证。你是这个意思吗？

链接是什么？

在这里查看logaretm.github.io/vee-validate/guide/forms.html#basic-example它在页面顶部

你能把代码贴在这里吗？

你可以在这里查看示例，codesandbox.io/s/jdqzk

【参考方案1】：

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

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

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

【讨论】：

在 OP 中添加了“编辑：”

你在文档中说的规则在哪里？