V验证不适用于插值属性

时间:2018-10-09 21:16:41

标签: javascript html validation vue.js vee-validate

当我使用静态属性时,验证错误会按预期出现:

<input type="number" name="phone" v-validate="'required|digits:10'">
<span>{{ errors.first(propertyName) }}</span>

但是,如果我不想在JavaScript中对验证规则进行硬编码怎么办?我认为这会起作用:

<input type="number" name="phone" :v-validate="phone.rules">
<span>{{ errors.first(propertyName) }}</span>

但是没有出现验证错误。有什么想法我做错了吗?

2 个答案:

答案 0 :(得分:2)

我已经创建了jsFiddle,并且一切似乎都正常。随时检查: https://jsfiddle.net/m67d8f4x/2032/

<input type="email" name="email" placeholder="Email" v-validate="rules.rule" v-model="email">
// js
  data() {
    return {
      rules: { rule: 'required' },
      email: ''
    }
  },

答案 1 :(得分:0)

我只需要从v-validate属性中删除冒号,然后该对象就可以工作了。即使用v-validate而不是:v-validate。我很困惑,因为将JavaScript与其他Vue属性一起使用需要冒号。