VeeValidate 之如何滑鼠移開就啟動驗證 ?

栏目: JavaScript · 发布时间: 7年前

内容简介：VeeValidate 預設只有鍵盤動作才會啟動驗證，滑鼠移開並不會，但這與一般人的使用經驗並不一樣。Vue 2.5.17VeeValidate 2.1.2

VeeValidate 預設只有鍵盤動作才會啟動驗證，滑鼠移開並不會，但這與一般人的使用經驗並不一樣。

Version

VeeValidate 2.1.2

Sympton

HelloWorld.vue

<template>
  <div class="hello">
    <div>
      <div>
        <input v-validate="'required|email'" name="email1" type="text">
      </div>
      <div>
        <input v-validate="'required|email'" name="email2" type="text">
      </div>
      <div>
        <span>{{ errors.first('email1') }}</span>
        <span>{{ errors.first('email2') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

export default {
  name: 'HelloWorld',
};
</script>

標準 VeeValidte 寫法，但會發現僅管滑鼠游標在兩個 <input> 中切換，並不會啟動 VeeValidate 的 required 。

Recipe

HelloWorld.vue

<template>
  <div class="hello">
    <div>
      <div>
        <input v-validate="'required|email'" name="email1" type="text">
      </div>
      <div>
        <input v-validate="'required|email'" name="email2" type="text">
      </div>
      <div>
        <span>{{ errors.first('email1') }}</span>
        <span>{{ errors.first('email2') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate, {
  events: 'input|blur',
});

export default {
  name: 'HelloWorld',
};
</script>

22 行

Vue.use(VeeValidate, {
  events: 'input|blur',
})

在 Vue.use() 加上第二個參數，傳進 events: 'input|blur' 即可。

事實上還有很多參數可以設定 VeeValidate

Sample Code

完整的範例可以在我的 GitHub 上找到

Conclusion

一個很 trivial 的需求，但可惜 VeeValidate 預設並沒有啟動，須自行設定

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

VeeValidate 之如何滑鼠移開就啟動驗證 ?

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

结网@改变世界的互联网产品经理

王坚 / 人民邮电出版社 / 2013-5-1 / 69.00元

《结网@改变世界的互联网产品经理(修订版)》以创建、发布、推广互联网产品为主线，描述了互联网产品经理的工作内容，以及应对每一部分工作所需的方法和工具。产品经理的工作是围绕用户及具体任务展开的，《结网@改变世界的互联网产品经理(修订版)》给出的丰富案例以及透彻的分析道出了从发现用户到最终满足用户这一过程背后的玄机。新版修改了之前版本中不成熟的地方，强化了章节之间的衔接，解决了前两版中部分章节过于孤立......一起来看看《结网@改变世界的互联网产品经理》这本书的介绍吧!

码农工具