當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

VeeValidate 的使用场景以及配置

發布時間：2023/12/20 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 VeeValidate 的使用场景以及配置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

創建vue項目:

vue init webpack veecd ./vee npm run dev# or yarn run dev

安裝 VeeValidate

npm install vee-validate --save # or yarn add vee-validate --save

本文中使用的 VeeValidate 版本為 2.1.5

在 App.vue 中引入

import VeeValidate from 'vee-validate';Vue.use(VeeValidate);

例子

第一個測試例子

<template><div class="test1"><div><inputtype="text"name="nickname"v-model="formData.nickname"v-validate="'required|min:3|max:10'"><p>{{errors.first('nickname')}}</p></div><div><button @click="handleSubmit">Submit</button></div></div> </template><script>export default {name: "test1",data() {return {formData: {nickname: '',password: '',}}},methods: {handleSubmit() {this.$validator.validate().then((valid) => {if (true === valid) {console.log('驗證通過');} else {console.log(this.$validator.errors.all());}})}}} </script><style scoped lang="css">.test1 {width: 900px;margin: 0 auto;} </style>

更多配置請參考官網!
我們只是用些常用配置和常用的驗證!

中文配置

全局配置

import VeeValidate, {Validator} from 'vee-validate'; import zh_CN from 'vee-validate/dist/locale/zh_CN'; Vue.use(VeeValidate, {dictionary: {zh_CN: zh_CN} }); Validator.localize('zh_CN');

這樣就可以使用中文提示了!

自定義錯誤提示

自定義驗證規則

<template><div class="test2"><div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'"></div><div>{{errors.first('nickname')}}</div><div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'"></div><div>{{errors.first('password')}}</div><div><input type="text" v-model="formData.re_password" data-vv-name="re_password"v-validate="'required|confirm'"></div><div>{{errors.first('re_password')}}</div><div><input type="text" v-model="formData.mobile" data-vv-name="mobile" v-validate="'required|mobile'"></div><div>{{errors.first('mobile')}}</div><div><button @click="handleSubmit">Submit</button></div></div> </template><script>const validate = {custom: {nickname: {required: () => '昵稱不得為空', //寫法1min: "昵稱不得小于3個字符", //寫法2max: () => '昵稱不得大于10個字符'},password: {required: () => '密碼不得為空',min: "密碼不得小于5個字符",max: () => '密碼不得大于200個字符'},re_password: {required: () => '請再次輸入密碼!',},mobile: {required: () => '請輸入手機號碼!',}},};export default {name: "test3",data() {return {formData: {nickname: '',password: '',re_password: '',mobile: ''}}},methods: {handleSubmit() {this.$validator.validate().then((valid) => {if (true === valid) {console.log('驗證通過');} else {console.log(this.$validator.errors.all());}})}},mounted() {this.$validator.localize('zh_CN', validate);this.$validator.extend('mobile', {getMessage: field => '手機號有誤',validate: value => {return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}})this.$validator.extend('confirm', {getMessage: field => '兩次密碼輸入不一致',validate: value => {return value === this.formData.password}})}} </script>

顯示第一個錯誤!

有時候我們需要在彈出層中提示用戶所以要顯示第一個錯誤

this.$validator.errors.items[0].msg

例子發驗證碼和注冊!

這個例子中發驗證碼是一個驗證注冊又是一個驗證所以有點意義!
在發送驗證碼的時候需要驗證手機號碼和圖形驗證碼注冊的時候需要驗證除圖形驗證碼之外的數據

template

<template><div class="reg"><div class="form_item"><div class="input"><inputtype="text"name="mobile"data-vv-name="mobile"v-model="mobile"v-validate="'required|mobile'"placeholder="手機號碼"></div><div class="err">{{errors.first('mobile')}}</div></div><div class="form_item"><div class="input"><inputtype="text"v-model="img_captcha"name="img_captcha"placeholder="圖形驗證碼"v-validate="'required'"></div><div class="err">{{errors.first('img_captcha')}}</div></div><div class="form_item"><div class="input send_sms"><inputtype="text"v-validate="'required|length:6'"v-model="sms_captcha"name="sms_captcha"placeholder="短信驗證碼"><button class="send_sms_btn" @click="handleSendSms">獲取驗證碼</button></div><div class="err">{{errors.first('sms_captcha')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="password"v-validate="'required|min:8'"v-model="password"placeholder="登錄密碼"ref="password"></div><div class="err">{{errors.first('password')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="re_password"v-validate="'required|confirmed:password'"v-model="re_password"placeholder="再次輸入登錄密碼"></div><div class="err">{{errors.first('re_password')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="nickname"v-validate="'required|min:3|max:10'"v-model="nickname"placeholder="請輸入昵稱"></div><div class="err">{{errors.first('nickname')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="id_card"v-validate="'required|id_card'"v-model="id_card"placeholder="請輸入身份證號碼"></div><div class="err">{{errors.first('id_card')}}</div></div><div class="form_item"><div class="input"><inputtype="date"name="birthday"v-validate="'required|date_format:YYYY-MM-DD'"v-model="birthday"placeholder="請輸入生日"></div><div class="err">{{errors.first('birthday')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="url"v-validate="'required|url'"v-model="url"placeholder="請輸入個人網址"></div><div class="err">{{errors.first('url')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="email"v-validate="'required|email'"v-model="email"placeholder="請輸入電子郵箱"></div><div class="err">{{errors.first('email')}}</div></div><div class="form_item"><div class="input"><inputtype="text"name="age"v-validate="'required|between:18,60'"v-model="age"placeholder="請輸入年齡"></div><div class="err">{{errors.first('age')}}</div></div><div class="form_item"><button class="reg_btn" @click="handleSubmit">注冊</button></div></div> </template>

style 代碼(這個是隨便寫的原生css大家不要吐槽哈)

js

外部引入的js (自定義提示內容)

export const messages = {custom: {mobile: {required: () => '請輸入手機號碼!',mobile: () => '手機號碼有誤',},img_captcha: {required: () => '請輸入圖形驗證碼!',},sms_captcha: {required: () => '請輸短信驗證碼!',length: () => '短信驗證碼為6位數字'},password: {required: () => '密碼不得為空',min: () => '密碼不得小于8個字符',},re_password: {required: () => '請再次輸入密碼!',confirmed: () => '兩次密碼輸入不一致'},nickname: {required: () => '請輸入昵稱',min: () => '昵稱最小為3位字符',max: (field, params) => {return `昵稱最大為${params[0]}位字符`;}},id_card: {required: "身份證號碼不得為空"},birthday: {required: "請選擇出生日期",date_format: "出生日期有誤"},url: {required: () => "請輸入個人網址",url: () => "網址輸入有誤"},email: {required: () => "請輸入電子郵箱",email: () => "電子郵箱輸入有誤"},age: {required: () => "請輸入年齡",between: () => "年齡必須在18-60歲之間"}}, };

擴展內容

自定義錯誤信息中顯示配置驗證規則中的參數

export const messages = {custom: {nickname: {required: () => "請輸入年齡",between: (fiield,params) => `年齡必須在${params[0]}-${params[1]}歲之間"}}, };

規則里面第一個參數是字段名稱第二個參數是驗證規則后面的參數;

驗證指定字段

validateAll(field Object) validateAll({mobile:this.moble});

還可以使用 data-vv-scope 來指定但是該方法并不適用一些場景;
顯示錯誤信息的時候必須要指定scope的值不然不會顯示錯誤信息

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的VeeValidate 的使用场景以及配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： BZOJ 2566 xmastree（树
下一篇： How to DEBUG a trigg