vee-validate

Question

我目前在两个单独的步骤中有两个表单，每个表单都有自己的提交按钮。

如果我用 $validator.validateAll() 页面上的所有输入都将被验证，但我只需要验证该表单。

这就是我所拥有的：

<v-form ref="form1">
    <v-text-field
        v-model="Account"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Account')"
        label="Account"
        data-vv-name="Account"
        name="account"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="PhoneNumber"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Phone Number')"
        label="Phone Number"
        data-vv-name="Phone Number"
        name="phone"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="NextStep()"
        >
        Next
    </v-btn>
</v-form>

和第二种形式

<v-form ref="form2">
    <v-text-field
        v-model="Email"
        v-validate="'required|email'"
        :error-messages="errors.collect('Email')"
        label="Email"
        data-vv-name="Email"
        name="email"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="Address"
        v-validate="'required'"
        :error-messages="errors.collect('Address')"
        label="Address"
        data-vv-name="Address"
        name="Address"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="FinalStep()"
        >
        Next
    </v-btn>
</v-form>

在我的 *.vue 文件中使用这个 JS：

async NextStep(){
    if (await this.$refs.form1.validate()) {
        this.SubmitOrder['Account'] = this.Account
        this.SubmitOrder['PhoneNumber'] = this.PhoneNumber
        this.ConfigureNumber = true;
    }
},
async FinalStep(){
    if (await this.$refs.form2.validate()) {
        this.SubmitOrder['Email'] = this.Email
        this.SubmitOrder['Address'] = this.Address
        this.ConfigureNumber = true;
    }
},

如果我删除 $refs 并将其更改为 $validator.validateAll() 它可以工作但不会进入下一步，因为正在验证下一个输入。

data-vv-scope (https://baianat.github.io/vee-validate/examples/scopes.html) 对我不起作用，因为我确实需要不同的方法（每个方法都会有更多）

知道这里出了什么问题吗？

谢谢！

Answer 1

尝试如下操作

const results = Promise.all([
  this.$validator.validate('field1'),
  this.$validator.validate('field2')
]);

const areValid = (await results).every(isValid => isValid);

Answer 2

使用 data-vv-scope="something" 内部引用的 validateAll('something'):

解决了问题

<v-form data-vv-scope="form1">
    <v-text-field
        v-model="Account"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Account')"
        label="Account"
        data-vv-name="Account"
        name="account"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="PhoneNumber"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Phone Number')"
        label="Phone Number"
        data-vv-name="Phone Number"
        name="phone"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="NextStep()"
        >
        Next
    </v-btn>
</v-form>

async NextStep() {
    await this.$validator.validateAll('form1').then((isValid) => {
        if (isValid) {
          this.SubmitOrder['Account'] = this.Account
        this.SubmitOrder['PhoneNumber'] = this.PhoneNumber
        this.ConfigureNumber = true
        } else {
          this.ConfigureNumber = false
        }
      })
}

vee-validate - 使用分离方法的独立表单验证

vee-validate - Independent forms validation with separated methods

javascript

html

vue.js

vuetify.js