如何設定 VeeValidate ?
栏目: JavaScript · 发布时间: 7年前
内容简介：Vue 本身對於 Form Validation 部分支援有限，必須使用 VeeValidate package 才堪稱好用。Vue 2.5.17VeeValidate 2.1.2
Vue 本身對於 Form Validation 部分支援有限，必須使用 VeeValidate package 才堪稱好用。
Version
Vue 2.5.17
VeeValidate 2.1.2
Introduction
$ yarn add vee-validate
- 安裝完後在
package.json會看到vee-validate
demo.vue
<template>
<div>
<div>
<input v-validate="'required|email'" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
name: 'basic-example',
};
</script>
第 13 行
import Vue from 'vue'; import VeeValidate from 'vee-validate';
將 Vue 與 VeeValidate import 進來。
16 行
Vue.use(VeeValidate);
將 VeeValidate 傳進 Vue.use() 。
第 4 行
<input v-validate="'required|email'" name="email" type="text">
在 <input> 加上 v-validate directive，以 pipe 方式描述要驗證方式。
required|email 表示 必填 且必須是 Email 格式。
name attribute 為必須，將來會傳入 errors.first() 顯示錯誤訊息。
第 7 行
<span>{{ errors.first('email') }}</span>
使用 errors.first() 顯示 第一個 錯誤訊息，傳入為 name attribute。
- 顯示
必填錯誤訊息
- 顯示 Email 格式錯誤訊息
Conclusion
- VeeValidate 還有更多的設定，本文先介紹最基本安裝與使用
Reference
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
移动交互设计精髓
班格 (Cameron Banga)、温霍尔德 (Josh Weinhold) / 傅小贞、张颖鋆 / 电子工业出版社 / 2015-4-1 / CNY 89.00
越来越多的人正涌入移动应用领域，而设计和体验将是移动应用成败的关键。作者通过上百款应用的设计实践，系统化地梳理了移动应用的设计方法论，在理解用户、跨平台和适配设计、移动组件应用、界面视觉感染力、简约设计等方面都进行了深入阐述。此外，作者还介绍了一些非常实用的移动设计工具，分享了设计师该如何与开发工程师协同工作，以及如何收集用户反馈、甄别版本迭代的更新需求等。 《移动交互设计精髓——设计完美的......一起来看看 《移动交互设计精髓》 这本书的介绍吧!
