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

介紹

在後端項目裏 好比咱們的Laravel框架 對於表單驗證有本身的一套validation機制 他將驗證集成在FormRequest css

咱們只須要在咱們的方法中依賴注入咱們本身實例化後的驗證類 固然也能夠直接去在方法裏去驗證表單數據html

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

1.安裝

和咱們安裝前端包同樣 在項目終端執行:vue

$ npm install vuelidate --save

安裝完成後和咱們去使用vuex同樣 在main.js去引入聲明這個package:git

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

固然你也能夠在須要用到驗證的組件裏去引用一個相對小的版本:github

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validation: { ... }
})

若是你偏好經過require這樣的形式 你也能夠這樣引入:vuex

const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')

2.使用

其實使用起來真的很方便 下面舉例來講就是在個人項目裏的使用數據庫

1.註冊驗證

在用戶註冊時 咱們一般的須要處理的表單字段就是name,email,password,confirm_pwdnpm

首先我在Register.vue這個組件文件中把基本的樣式結構寫好 這取決於每一個人json

接着是咱們對錶單數據的驗證:

這裏是對用戶名和郵箱的驗證 就像以前提到的 咱們先引入咱們的驗證規則:

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

由於我是對一個新用戶的註冊 因此我定義一個data

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

接着去定義咱們的驗證字段的規則:

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

定義這些驗證規則以後 下面是個人html部份內容

<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">請填寫正確的郵箱格式</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裏面的內容

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

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

也就是一個與的組合 你能夠去試着改變這二者的值 再去看$error的值

固然還有兩個重要的方法: $touch $reset 上面也有實例 說簡單點就是設置這個以及子節點的$dirtytrue或者false

而設置這個$dirty 再結合 $invalid就能夠判斷驗證成功與否

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

在這裏的驗證規則流程是這樣的 若是$errortrue那麼form-group會添加一個form-group--error這個class
只有在$errortrue時 若是你不符合任意一個驗證規則 例如不符合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.密碼驗證

密碼驗證其實和上面的差很少 只不過他的驗證規則時經過 sameAs 來進行驗證的

3.組合驗證

除了上面這些還有一個組合驗證 也就是若是任意一個不符合驗證規則就不經過 這個仍是挺經常使用的

咱們能夠在驗證字段這樣去組合:

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

若是任意一個就是FlatA flatB forGroup其中一個不符合驗證規則 那麼$v.validationGroup.$error就是false

4.異步驗證

特別是在驗證惟一性的時候 咱們確定會遇到這樣的一個場景:

就好比咱們的郵箱 若是已經註冊過這個郵箱了 那麼再用這個郵箱去註冊顯然不是咱們想要的

還有就是咱們登陸時咱們須要去核對咱們的用戶的密碼

這邊我給出的實例就是對於用戶名的註冊 若是已經註冊了就會提示已經註冊過

徹底支持async/await語法。它與Fetch API結合使用也很出色 那麼咱們能夠經過後端API提供的結果能夠進行判斷

咱們能夠去增長咱們惟一性的驗證:

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())
    }
},

這裏我如今本地測試 經過Laravel做爲後端來提供的數據校驗 實際項目中的話能夠再結合數據庫

//用戶驗證路由
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);
    });
});

若是咱們去註冊 gavin這個用戶就會提示該暱稱已經被註冊 由於在用戶名我增長了isUnique驗證

<span class="form-group__message" v-if="!$v.newUser.name.isUnique">用戶名已經被註冊</span>

顯示結果應該是這樣的:
圖片描述

5.自定義驗證

一樣的咱們不只可使用它提供給咱們的驗證規則 咱們也能夠自定義驗證規則並與以前的進行組合

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

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

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

相關網址

相關文章
相關標籤/搜索