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