這篇文章將為大家詳細(xì)講解有關(guān)vuelidate對于vueJs2.0驗(yàn)證的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
介紹
在后端項(xiàng)目里 比如我們的Laravel框架 對于表單驗(yàn)證有自己的一套validation機(jī)制 他將驗(yàn)證集成在FormRequest
我們只需要在我們的方法中依賴注入我們自己實(shí)例化后的驗(yàn)證類 當(dāng)然也可以直接去在方法里去驗(yàn)證表單數(shù)據(jù)
而在我們的前端的項(xiàng)目里 也就是在我們的vue項(xiàng)目里 也有比較好的驗(yàn)證解決方案 也就是這的vuelidate
1.安裝
和我們安裝前端包一樣 在項(xiàng)目終端執(zhí)行:
$ npm install vuelidate --save
安裝完成后和我們?nèi)ナ褂胿uex一樣 在main.js去引入聲明這個(gè)package:
import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
當(dāng)然你也可以在需要用到驗(yàn)證的組件里去引用一個(gè)相對小的版本:
重慶分公司
重慶分公司
import { validationMixin } from 'vuelidate'
var Component = Vue.extend({
mixins: [validationMixin],
validation: { ... }
})如果你偏好通過require這樣的形式 你也可以這樣引入:
const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')2.使用
其實(shí)使用起來真的很方便 下面舉例來說就是在我的項(xiàng)目里的使用
1.注冊驗(yàn)證
在用戶注冊時(shí) 我們通常的需要處理的表單字段就是name,email,password,confirm_pwd
首先我在Register.vue這個(gè)組件文件中把基本的樣式結(jié)構(gòu)寫好 這取決于每個(gè)人
接著是我們對表單數(shù)據(jù)的驗(yàn)證:
這里是對用戶名和郵箱的驗(yàn)證 就像之前提到的 我們先引入我們的驗(yàn)證規(guī)則:
import { required,minLength,between,email } from 'vuelidate/lib/validators'因?yàn)槲沂菍σ粋€(gè)新用戶的注冊 所以我定義一個(gè)data
data(){
return{
newUser: {
name:'',
email:'',
password:'',
confirm_pwd:''
},
}
},接著去定義我們的驗(yàn)證字段的規(guī)則:
validations: {
newUser:{
name: {
required,
minLength: minLength(2)
},
email: {
required,email
}
}
},定義這些驗(yàn)證規(guī)則之后 下面是我的html部分內(nèi)容
