如何使用 Vee-Validate 验证选择选项答案

【问题标题】：How To Validate Select Option With Vee-Validate如何使用 Vee-Validate 验证选择选项
【发布时间】：2018-11-27 14:15:38
【问题描述】：

浏览 vee-validates 文档，我没有看到任何用于验证选择输入的内容。所以我的问题是你能验证选择吗？目前我尝试的没有显示错误消息...

这里是代码

<select id="category" v-model="client.category" name="Category Type" v-validate="'required'">
  <option disabled>{{option}}</option>
  <option v-for="category in categories" :key="category.id" :value="category">{{ category }}</option>
 </select>
 <spanv-show="errors.has('Category Type')">{{ errors.first('Category Type') }}</span>

【问题讨论】：

这很好，只需在<span 和v-show 之间放置一个空格。 Proof
@Ohgodwhy，我的例子有什么问题？ JSFiddle
@Ohgodwhy，似乎将选择字段设置为我的disabled>{{option}} 正在使验证方法认为它是可以的......如果这有意义..
@Ohgodwhy，我添加了这个v-validate="{ is_not: option }"

标签： vue.js vee-validate

【解决方案1】：

嗯，我发现了这个问题，我知道一年前的答案是正确的。但是现在是的，我们可以在选择中验证一个对象。因此，对于那些选择使用和对象作为值的人，您可以将所需的验证添加为自定义验证，如下所示：

extend('objectNotEmpty', {
  validate: (value) => {
    if (Object.keys(value).length > 0) {
      return true;
    }
    return i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED');
  },
});

当然还要在 ValidationProvider 的规则列表中添加“objectNotEmpty”

【讨论】：

【解决方案2】：

v-model="client.category"

如果您的 v-model 是复杂对象，则 v-validate 不起作用。我会使用字符串/数字来绑定选项->选择，然后使用一些函数来模拟对象中的其余属性。

【讨论】：