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 預設並沒有啟動，須自行設定
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Masterminds of Programming
Federico Biancuzzi、Chromatic / O'Reilly Media / 2009-03-27 / USD 39.99
Description Masterminds of Programming features exclusive interviews with the creators of several historic and highly influential programming languages. Think along with Adin D. Falkoff (APL), Jame......一起来看看 《Masterminds of Programming》 这本书的介绍吧!
