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

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)不适合我，因为我确实需要不同的方法(每个方法都有更多的方法)

知道这是怎么回事吗？

Tks！

Answer 1

使用validateAll(‘某某物’)中引用的数据-vv-作用域=“某样东西”解决问题：

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

Answer 2

试着按以下方式做

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

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