编程学习

VeeValidate 光标离开输入框焦点就验证

一个很常见的需求就是当用户的光标离开输入框的时候就启用验证规则进行验证，默认的配置并不支持，需要自行配置。

版本

  • Vue 2.5.22
  • vue-validate 2.1.7

编写 DemoForm.vue

全局配置


<template>
  <div>
    <div>
      <input type="text" v-validate="'required|email'" name="email">
    </div>
    <div>
      <span>{{ errors.first('email') }}</span>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";

Vue.use(VeeValidate, {
  events: 'input|blur',
});
export default {
  name: "DemoForm",
};
</script>
  • 在 Vue.use()的第二个参数传入events: 'input|blur'即可。

针对某个单独字段配置


<template>
  <div>
    <div>
      <input type="text" v-validate="'required|email'" data-vv-validate-on="change|blur" name="email">
    </div>
    <div>
      <span>{{ errors.first('email') }}</span>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";

Vue.use(VeeValidate);
export default {
  name: "DemoForm",
};
</script>

参考地址