Question

我正在使用vuejs 2并使用vee-validate 2.0.0-beta.18进行验证。但是当我调用this.$validator.validateAll()时遇到问题它只验证一个字段。这是jsfiddle。

这是html：

<body>
  <div id="app">
    <form @submit.prevent="submitForm">
      <label>Email</label>
      <input type="text" placeholder="Email" class="form-control" 
          v-model="email" name="email"
          v-validate data-vv-rules="required|email">
      <p v-if="errors.has('email')" class="text-danger">{{ errors.first('email') }}</p>

      <label>Name</label>
      <input type="text" placeholder="Name" class="form-control" 
          v-model="name" name="name"
          v-validate data-vv-rules="required">
      <p v-if="errors.has('name')" class="text-danger">{{ errors.first('name') }}</p>

      <label>City</label>
      <select class="form-control" 
          v-model="city" name="city" 
          v-validate data-vv-rules="required">
        <option value="">-- Select One --</option>
        <option value="c.id" v-for="c in cities">{{ c.name }}</option>
      </select>
      <p v-if="errors.has('city')" class="text-danger">{{ errors.first('city') }}</p>

      <button>Submit</button>
    </form>

    <pre>{{ errors }}</pre>
    <pre>{{ fields }}</pre>

  </div>
</body>

这是js：

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    cities: [{
      id: 1,
      name: 'Jakarta'
    }, {
      id: 2,
      name: 'Depok'
    }],
    name: '',
    city: '',
    email: ''
  },
  methods: {
    submitForm: function() {
      this.$validator.validateAll().then(function(success) {
        if (!success) return;

        alert("All good")
      })
    }
  }
})

为什么只验证电子邮件字段？

Answer 1

在上面的html代码中，我将错误显示指令从"v-if"更改为"v-show"，然后它开始工作。以下是JsFiddle中的工作示例。

根据VueJs Document Guide，"v-if"与"v-show"之间的比较。

v-if是懒惰的：如果条件在初始渲染时为假，它将不会执行任何操作 - 条件块将不会呈现，直到条件第一次变为真

相比之下，v-show要简单得多 - 无论初始条件如何，都会始终呈现元素，只需简单的基于CSS的切换。

Vee-Validate仅验证一个字段

1 个答案: