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 預設並沒有啟動,須自行設定

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

查看所有标签

猜你喜欢:

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

搜索引擎

搜索引擎

(美)克罗夫特 / 机械工业出版社 / 2009-10 / 45.00元

《搜索引擎:信息检索实践(英文版)》介绍了信息检索(1R)中的关键问题。以及这些问题如何影响搜索引擎的设计与实现,并且用数学模型强化了重要的概念。对于网络搜索引擎这一重要的话题,书中主要涵盖了在网络上广泛使用的搜索技术。 《搜索引擎:信息检索实践(英文版)》适用于高等院校计算机科学或计算机工程专业的本科生、研究生,对于专业人士而言,《搜索引擎:信息检索实践(英文版)》也不失为一本理想的入门教......一起来看看 《搜索引擎》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码