javascript - Nuxt应用程序中的表单验证始终返回true(Form validation in Nuxt application returns always true)

Question

I just start using vee-validate in my project.

(我只是在项目中开始使用vee-validate。)

I have following code in my component where is simple form group with validation

(我的组件中有以下代码，其中是带有验证的简单表单组)

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

I have imported ValidationObserver and ValidationProvider in component but validation behave weird.

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

On picture you can see default behavior.

(在图片上您可以看到默认行为。)

It is green from start and doesn't matter what I write or if I submit as empty.

(从一开始就是绿色，无论我写什么或提交为空都无关紧要。)

It is always green.

(它总是绿色的。)

Submit method looks like this:

(Submit方法如下所示：)

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

and gives me always true.

(并给我永远的真实。)

I am using nuxt 2.9.x and vee-validate 3.1.x

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

  ask by Denis Stephanov translate from so

Answer 1

等待大神答复