VeeValidate 之如何滑鼠移開就啟動驗證 ?
栏目: JavaScript · 发布时间: 5年前
内容简介: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 預設並沒有啟動,須自行設定
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。