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

【问题标题】：vee-validate - Independent forms validation with separated methodsvee-validate - 使用分离方法的独立表单验证
【发布时间】：2019-07-02 09:03:15
【问题描述】：

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

如果我使用 $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) 对我不起作用，因为我确实需要不同的方法（每种方法都会有更多）

知道这里有什么问题吗？

谢谢！

【问题讨论】：

标签： javascript html vue.js vuetify.js vee-validate

【解决方案1】：

使用 validateAll('something') 中引用的 data-vv-scope="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
        }
      })
}

【讨论】：

【解决方案2】：

尝试如下操作

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

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

【讨论】：