VeeValidation returns 始终为真

Question

我刚开始在我的项目中使用 vee-validate。我的组件中有以下代码，其中是带有验证的简单表单组

    <ValidationObserver ref="observer" v-slot="{ invalid }">
        <b-form @submit.prevent="onSubmit" novalidate>
            <b-form-group label="Amount">
                <ValidationProvider name="amount" rules="required|min_value:0" v-slot="{ errors }">
                    <b-form-input
                        :state="errors.length == 0"
                        v-model="form.amount"
                        type="text"
                        placeholder="Amount"
                    ></b-form-input>
                    <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
                </ValidationProvider>
            </b-form-group>
        </b-form>
    </ValidationObserver>

我在组件中导入了 ValidationObserver 和 ValidationProvider，但验证行为很奇怪。

在图片上您可以看到默认行为。它从一开始就是绿色的，无论我写什么或者我是否提交为空都没有关系。它总是绿色的。

提交方法如下所示：

       async onSubmit() {
            let validate = await this.$refs.observer.validate();
            console.log('VALID: ', validate)
        },

并给我永远正确的结果。

我正在使用 nuxt 2.9.x 和 vee-validate 3.1.x

Answer 1

使用 vee-validate，您必须明确 extend 使用您想要的任何规则进行 vee-validate。文档中有一个具体示例 here 介绍了如何执行此操作：

import { extend } from 'vee-validate';
import { required, min_value } from 'vee-validate/dist/rules';

extend('min_value', min_value);
extend('required', required);

如果您不这样做，您的规则将被忽略，表单始终被验证为有效。

此外，如果您使用的是 nuxt，请参阅注释 here

VeeValidation returns 始终为真

VeeValidation returns always true

javascript

vue.js

vuejs2

nuxt.js

vee-validate