VeeValidate 之如何滑鼠移開就啟動驗證 ?
栏目: JavaScript · 发布时间: 7年前
内容简介：VeeValidate 預設只有鍵盤動作才會啟動驗證，滑鼠移開並不會，但這與一般人的使用經驗並不一樣。Vue 2.5.17VeeValidate 2.1.2
VeeValidate 預設只有鍵盤動作才會啟動驗證，滑鼠移開並不會，但這與一般人的使用經驗並不一樣。
Version
Vue 2.5.17
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 預設並沒有啟動，須自行設定
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Docker开发指南
[英] Adrian Mouat / 黄彦邦 / 人民邮电出版社 / 2017-4 / 79.00元
Docker容器轻量和可移植的特性尤其适用于动态和分布式的环境，它的兴起给软件开发流程带来了一场革命。本书对Docker进行了全面讲解，包括开发、生产以至维护的整个软件生命周期，并对其中可能出现的一些问题进行了探讨，如软件版本差异、开发环境与生产环境的差异、系统安全问题，等等。一起来看看 《Docker开发指南》 这本书的介绍吧!
