創(chuàng)建vue項(xiàng)目:

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);

例子

第一個(gè)測(cè)試?yán)?/h2> <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('驗(yàn)證通過(guò)');} else {console.log(this.$validator.errors.all());}})}}} </script><style scoped lang="css">.test1 {width: 900px;margin: 0 auto;} </style>

更多配置請(qǐng)參考官網(wǎng)!
我們只是用些常用配置和常用的驗(yàn)證!

中文配置

全局配置

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');

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

自定義錯(cuò)誤提示

<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><button @click="handleSubmit">Submit</button></div></div> </template><script>const validate = {custom: {nickname: {required: () => '昵稱(chēng)不得為空', //寫(xiě)法1min: "昵稱(chēng)不得小于3個(gè)字符", //寫(xiě)法2max: () => '昵稱(chēng)不得大于10個(gè)字符'},password: {required: () => '密碼不得為空',min: "密碼不得小于5個(gè)字符",max: () => '密碼不得大于200個(gè)字符'}},};export default {name: "test2",data() {return {formData: {nickname: '',password: '',}}},methods: {handleSubmit() {this.$validator.validate().then((valid) => {if (true === valid) {console.log('驗(yàn)證通過(guò)');} else {console.log(this.$validator.errors.all());}})}},mounted() {this.$validator.localize('zh_CN', validate);}} </script>

自定義驗(yàn)證規(guī)則

<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: () => '昵稱(chēng)不得為空', //寫(xiě)法1min: "昵稱(chēng)不得小于3個(gè)字符", //寫(xiě)法2max: () => '昵稱(chēng)不得大于10個(gè)字符'},password: {required: () => '密碼不得為空',min: "密碼不得小于5個(gè)字符",max: () => '密碼不得大于200個(gè)字符'},re_password: {required: () => '請(qǐng)?jiān)俅屋斎朊艽a!',},mobile: {required: () => '請(qǐng)輸入手機(jī)號(hào)碼!',}},};export default {name: "test3",data() {return {formData: {nickname: '',password: '',re_password: '',mobile: ''}}},methods: {handleSubmit() {this.$validator.validate().then((valid) => {if (true === valid) {console.log('驗(yàn)證通過(guò)');} else {console.log(this.$validator.errors.all());}})}},mounted() {this.$validator.localize('zh_CN', validate);this.$validator.extend('mobile', {getMessage: field => '手機(jī)號(hào)有誤',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>

顯示第一個(gè)錯(cuò)誤!

有時(shí)候我們需要在彈出層中提示用戶 所以要顯示第一個(gè)錯(cuò)誤

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

例子 發(fā)驗(yàn)證碼和注冊(cè)!

這個(gè)例子中發(fā)驗(yàn)證碼是一個(gè)驗(yàn)證 注冊(cè)又是一個(gè)驗(yàn)證 所以有點(diǎn)意義!
在發(fā)送驗(yàn)證碼的時(shí)候需要驗(yàn)證手機(jī)號(hào)碼和圖形驗(yàn)證碼 注冊(cè)的時(shí)候需要驗(yàn)證除圖形驗(yàn)證碼之外的數(shù)據(jù)

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="手機(jī)號(hào)碼"></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="圖形驗(yàn)證碼"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="短信驗(yàn)證碼"><button class="send_sms_btn" @click="handleSendSms">獲取驗(yàn)證碼</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="請(qǐng)輸入昵稱(chēng)"></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="請(qǐng)輸入身份證號(hào)碼"></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="請(qǐng)輸入生日"></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="請(qǐng)輸入個(gè)人網(wǎng)址"></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="請(qǐng)輸入電子郵箱"></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="請(qǐng)輸入年齡"></div><div class="err">{{errors.first('age')}}</div></div><div class="form_item"><button class="reg_btn" @click="handleSubmit">注冊(cè)</button></div></div> </template>

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

<style>.err {color: red;font-size: 12px;text-align: left;}.reg {width: 500px;margin: 0 auto;}.send_sms {position: relative;}.send_sms_btn {position: absolute;width: 100px;height: 30px;right: -11px;top: 2px;cursor: pointer;border: none;border-radius: 4px;background-color: #e4393c;outline: none;color: #fff;}.form_item {margin-bottom: 10px;width: 400px;}input {width: 400px;height: 30px;border: 1px solid #999;border-radius: 4px;outline: none;padding-left: 10px;}.reg_btn {width: 100px;height: 30px;border: none;border-radius: 4px;background-color: #e4393c;outline: none;cursor: pointer;color: #fff;} </style>

js

<script>import {messages} from '../validate/reg'export default {name: "reg",data() {return {url: '',age: '',email: '',birthday: '',id_card: '',nickname: '',mobile: '',img_captcha: '',sms_captcha: '',password: '',re_password: '',}},mounted() {this.$validator.localize('zh_CN', messages);this.$validator.extend('mobile', {getMessage: field => '手機(jī)號(hào)有誤',validate: value => {return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}});this.$validator.extend('id_card', {getMessage: field => '身份證號(hào)碼格式有誤',validate: value => {return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)}});},methods: {handleSubmit() {this.$validator.errors.clear();this.$validator.validateAll({mobile: this.mobile,password: this.password,sms_captcha: this.sms_captcha,re_password: this.re_password,url: this.url,age: this.age,email: this.email,birthday: this.birthday,id_card: this.id_card,nickname: this.nickname,}).then((valid) => {console.log(valid);if (true === valid) {console.log('驗(yàn)證通過(guò)');} else {console.log(this.$validator.errors.all());}});},handleSendSms() {this.$validator.errors.clear();this.$validator.validateAll({mobile: this.mobile,img_captcha: this.img_captcha}).then((valid) => {console.log(valid);if (true === valid) {console.log('驗(yàn)證通過(guò)');} else {console.log(this.$validator.errors.all());}});}}} </script>

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

export const messages = {custom: {mobile: {required: () => '請(qǐng)輸入手機(jī)號(hào)碼!',mobile: () => '手機(jī)號(hào)碼有誤',},img_captcha: {required: () => '請(qǐng)輸入圖形驗(yàn)證碼!',},sms_captcha: {required: () => '請(qǐng)輸短信驗(yàn)證碼!',length: () => '短信驗(yàn)證碼為6位數(shù)字'},password: {required: () => '密碼不得為空',min: () => '密碼不得小于8個(gè)字符',},re_password: {required: () => '請(qǐng)?jiān)俅屋斎朊艽a!',confirmed: () => '兩次密碼輸入不一致'},nickname: {required: () => '請(qǐng)輸入昵稱(chēng)',min: () => '昵稱(chēng)最小為3位字符',max: (field, params) => {return `昵稱(chēng)最大為${params[0]}位字符`;}},id_card: {required: "身份證號(hào)碼不得為空"},birthday: {required: "請(qǐng)選擇出生日期",date_format: "出生日期有誤"},url: {required: () => "請(qǐng)輸入個(gè)人網(wǎng)址",url: () => "網(wǎng)址輸入有誤"},email: {required: () => "請(qǐng)輸入電子郵箱",email: () => "電子郵箱輸入有誤"},age: {required: () => "請(qǐng)輸入年齡",between: () => "年齡必須在18-60歲之間"}}, };

擴(kuò)展內(nèi)容

自定義錯(cuò)誤信息中顯示配置驗(yàn)證規(guī)則中的參數(shù)

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

規(guī)則里面第一個(gè)參數(shù)是字段名稱(chēng) 第二個(gè)參數(shù)是驗(yàn)證規(guī)則后面的參數(shù);

驗(yàn)證指定字段

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

還可以使用 data-vv-scope 來(lái)指定 但是該方法并不適用一些場(chǎng)景;
顯示錯(cuò)誤信息的時(shí)候必須要指定scope的值 不然不會(huì)顯示錯(cuò)誤信息

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。