詳解vuelidate 對于vueJs2.0的驗證解決方案

更新時間：2017年03月09日 10:48:48 作者：JellyBean

本篇文章主要介紹了vuelidate 對于vueJs2.0的驗證解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

介紹

在后端項目里比如我們的Laravel框架對于表單驗證有自己的一套validation機制他將驗證集成在FormRequest

我們只需要在我們的方法中依賴注入我們自己實例化后的驗證類當然也可以直接去在方法里去驗證表單數(shù)據(jù)

而在我們的前端的項目里也就是在我們的vue項目里也有比較好的驗證解決方案也就是這的vuelidate

1.安裝

和我們安裝前端包一樣在項目終端執(zhí)行:

$ npm install vuelidate --save

安裝完成后和我們?nèi)ナ褂胿uex一樣在main.js去引入聲明這個package:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

當然你也可以在需要用到驗證的組件里去引用一個相對小的版本:

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.使用

其實使用起來真的很方便下面舉例來說就是在我的項目里的使用

1.注冊驗證

在用戶注冊時我們通常的需要處理的表單字段就是name,email,password,confirm_pwd

首先我在Register.vue這個組件文件中把基本的樣式結(jié)構(gòu)寫好這取決于每個人

接著是我們對表單數(shù)據(jù)的驗證:

這里是對用戶名和郵箱的驗證就像之前提到的我們先引入我們的驗證規(guī)則:

import { required,minLength,between,email } from 'vuelidate/lib/validators'

因為我是對一個新用戶的注冊所以我定義一個data

 data(){
  return{
    newUser: {
      name:'',
      email:'',
      password:'',
      confirm_pwd:''
    },
  }
},

接著去定義我們的驗證字段的規(guī)則:

validations: {
  newUser:{
    name: {
      required,
      minLength: minLength(2)
    },
    email: {
      required,email
    }
  }
},

定義這些驗證規(guī)則之后下面是我的html部分內(nèi)容

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.name.$error }">
<label class="control-label">用戶名</label>
<el-input
    placeholder="請輸入你的用戶名"
    v-model.trim="newUser.name"
    @input="$v.newUser.name.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.name.required">用戶名不能為空</span>
<span class="form-group__message" v-if="!$v.newUser.name.minLength">用戶名不能太短</span>

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.email.$error }">
<label class="control-label">郵箱</label>
<el-input
    placeholder="請輸入你的郵箱"
    v-model.trim="newUser.email"
    @input="$v.newUser.email.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.email.required">郵箱不能為空</span>
<span class="form-group__message" v-if="!$v.newUser.email.email">請?zhí)顚懻_的郵箱格式</span>

每個人可以都不一樣官方文檔上也給出了demo:

<div>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatA.$error }">
  <label class="form__label">Flat A</label>
  <input class="form__input" v-model.trim="flatA" @input="$v.flatA.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatA.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatB.$error }">
  <label class="form__label">Flat B</label>
  <input class="form__input" v-model.trim="flatB" @input="$v.flatB.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatB.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.forGroup.nested.$error }">
  <label class="form__label">Nested field</label>
  <input class="form__input" v-model.trim="forGroup.nested" @input="$v.forGroup.nested.$touch()">
 </div><span class="form-group__message" v-if="!$v.forGroup.nested.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.validationGroup.$error }"></div><span class="form-group__message" v-if="$v.validationGroup.$error">Group is invalid.</span>
 <pre>validationGroup: {{ $v.validationGroup }}</pre>
</div>

我們先這樣舉例值得注意的是我們需要去知道他的$v.name里面的內(nèi)容

也就是 $invalid $dirty $error $pending $each 這個value

特別的注意 $error里的解釋：It is a shorthand to $invalid && $dirty

也就是一個與的組合你可以去試著改變這兩者的值再去看$error的值

當然還有兩個重要的方法: $touch $reset 上面也有實例說簡單點就是設(shè)置這個以及子節(jié)點的$dirty 為true或者false

而設(shè)置這個$dirty 再結(jié)合 $invalid就可以判斷驗證成功與否

$error 是由$dirty和$invalid共同決定的

在這里的驗證規(guī)則流程是這樣的如果$error為true那么form-group會添加一個form-group--error這個class

只有在$error為true時如果你不符合任意一個驗證規(guī)則例如不符合required 那么就會提示驗證失敗

如果驗證錯誤就給出錯誤提示這是我的錯誤樣式:

.form-group__message{
  display: none;
  font-size: .95rem;
  color: #CC3333;
  margin-left: 10em;
  margin-bottom: 12px;
}
.form-group--error+.form-group__message {
  display: block;
  color: #CC3333;
}

.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
  border-color: #CC3333;
}

2.密碼驗證

密碼驗證其實和上面的差不多只不過他的驗證規(guī)則時通過 sameAs 來進行驗證的

3.組合驗證

除了上面這些還有一個組合驗證也就是如果任意一個不符合驗證規(guī)則就不通過這個還是挺常用的

我們可以在驗證字段這樣去組合:

validations: {
  flatA: { required },
  flatB: { required },
  forGroup: {
   nested: { required }
  },
  validationGroup: ['flatA', 'flatB', 'forGroup.nested']
}

如果任意一個就是FlatA flatB forGroup其中一個不符合驗證規(guī)則那么$v.validationGroup.$error就是false

4.異步驗證

特別是在驗證唯一性的時候我們肯定會遇到這樣的一個場景:

就比如我們的郵箱如果已經(jīng)注冊過這個郵箱了那么再用這個郵箱去注冊顯然不是我們想要的

還有就是我們登錄時我們需要去核對我們的用戶的密碼

這邊我給出的實例就是對于用戶名的注冊如果已經(jīng)注冊了就會提示已經(jīng)注冊過

完全支持async/await語法。它與Fetch API結(jié)合使用也很出色那么我們可以通過后端API提供的結(jié)果可以進行判斷
我們可以去增加我們唯一性的驗證:

name: {
  required,
  minLength: minLength(4),
  async isUnique (value) {
    if (value === '') return true
    const response = await fetch(`http://localhost:8000/api/unique/name/${value}`)
    return Boolean(await response.json())
  }
},

這里我現(xiàn)在本地測試通過Laravel作為后端來提供的數(shù)據(jù)校驗實際項目中的話可以再結(jié)合數(shù)據(jù)庫

//用戶驗證路由
Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () {
  Route::get('/name/{value}',function(Request $request,$value){
    if($value==="gavin"){
      return response()->json(false);
    }
    return response()->json(true);
  });
});

如果我們?nèi)プ?gavin這個用戶就會提示該昵稱已經(jīng)被注冊因為在用戶名我增加了isUnique驗證

復制代碼代碼如下:

<span class="form-group__message" v-if="!$v.newUser.name.isUnique">用戶名已經(jīng)被注冊</span>

顯示結(jié)果應該是這樣的:

5.自定義驗證

同樣的我們不僅可以使用它提供給我們的驗證規(guī)則我們也可以自定義驗證規(guī)則并與之前的進行組合

官方給出了一個簡單實例:

export default value => {
 if (Array.isArray(value)) return !!value.length

 return value === undefined || value === null
  ? false
  : !!String(value).length
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: