vee-validate验证不存在的字段

Question

验证一组字段时，对于具有v-if属性的DOM中隐藏的字段，将显示错误。

例如，我有3个字段：

RaisedButton retrieve = new RaisedButton(onPressed: () async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  if(prefs.get("userName") == null && prefs.get("password") == null) {
    // Data not available
  } else {
   // Data Available
    print("UserName: " + prefs.get("userName"));
    print("Password: " + prefs.get("password"));
  }
},
    child: new Text("Retrive"));

运行提交功能时，我正在检查所有字段均未包含错误：

<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />

我看到以下错误：

this.$validator.validateAll().then(() => {
  ... my check
});

在更新“ showMe”状态时分离并重新附加“ foobar”字段似乎很冗长。尤其是对于我较大的多步表单。

是否有更简单的方法来防止出现此错误？

Answer 1

您需要将v-show与动态应用的验证规则结合起来。在此处将规则作为对象传递，其中第一个键：值是规则名称和布尔值（如果需要）（可以与v-if布尔值相同）。

对于VeeValidate 2（有问题的旧版本）

<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />

See Sandbox Example for VeeValidate2

对于VeeValidate 3

<validation-provider rules="required">
    <input type="text" v-model="foo">
</validation-provider>

<validation-provider :rules="{required: showMe}">
   <input type="text" v-model="bar" v-show="showMe">
</validation-provider>

See Sandbox Example for VeeValidate 3。

Answer 2

如果你想对隐藏输入运行验证，你只需要将字段的显示设置为无：

<input style="display: none">

这个方法很适合我！