摘要：介紹在后端項(xiàng)目里比如我們的框架對(duì)于表單驗(yàn)證有自己的一套機(jī)制他將驗(yàn)證集成在我們只需要在我們的方法中依賴注入我們自己實(shí)例化后的驗(yàn)證類當(dāng)然也可以直接去在方法里去驗(yàn)證表單數(shù)據(jù)而在我們的前端的項(xiàng)目里也就是在我們的項(xiàng)目里也有比較好的驗(yàn)證解決方案也就是這

在后端項(xiàng)目里 比如我們的Laravel框架 對(duì)于表單驗(yàn)證有自己的一套validation機(jī)制 他將驗(yàn)證集成在FormRequest

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

而在我們的前端的項(xiàng)目里 也就是在我們的vue項(xiàng)目里 也有比較好的驗(yàn)證解決方案 也就是這的vuelidate

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

$ npm install vuelidate --save

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

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

當(dāng)然你也可以在需要用到驗(yàn)證的組件里去引用一個(gè)相對(duì)小的版本:

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

其實(shí)使用起來真的很方便 下面舉例來說就是在我的項(xiàng)目里的使用

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

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

接著是我們對(duì)表單數(shù)據(jù)的驗(yàn)證:

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

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

因?yàn)槲沂菍?duì)一個(gè)新用戶的注冊(cè) 所以我定義一個(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)容

用戶名



用戶名不能為空
用戶名不能太短


郵箱



郵箱不能為空
請(qǐng)?zhí)顚懻_的郵箱格式

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

  

    Flat A
    
  
Field is required.
  

    Flat B
    
  
Field is required.
  

    Nested field
    
  
Field is required.
  
Group is invalid.
  
validationGroup: {{ $v.validationGroup }}

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

也就是 $invalid $dirty $error $pending $each 這個(gè)value

特別的注意 $error里的解釋：It is a shorthand to $invalid && $dirty 
也就是一個(gè)與的組合 你可以去試著改變這兩者的值 再去看$error的值

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

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

$error 是由$dirty和$invalid共同決定的 
在這里的驗(yàn)證規(guī)則流程是這樣的 如果$error為true那么form-group會(huì)添加一個(gè)form-group--error這個(gè)class
只有在$error為true時(shí) 如果你不符合任意一個(gè)驗(yàn)證規(guī)則 例如不符合required 那么就會(huì)提示驗(yàn)證失敗

如果驗(yàn)證錯(cuò)誤就給出錯(cuò)誤提示 這是我的錯(cuò)誤樣式:

.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;
}

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

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

我們可以在驗(yàn)證字段這樣去組合:

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

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

特別是在驗(yàn)證唯一性的時(shí)候 我們肯定會(huì)遇到這樣的一個(gè)場景:

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

還有就是我們登錄時(shí)我們需要去核對(duì)我們的用戶的密碼

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

完全支持async/await語法。它與Fetch API結(jié)合使用也很出色 那么我們可以通過后端API提供的結(jié)果可以進(jìn)行判斷

我們可以去增加我們唯一性的驗(yàn)證:

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)在本地測(cè)試 通過Laravel作為后端來提供的數(shù)據(jù)校驗(yàn) 實(shí)際項(xiàng)目中的話可以再結(jié)合數(shù)據(jù)庫

//用戶驗(yàn)證路由
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)プ?cè) gavin這個(gè)用戶就會(huì)提示該昵稱已經(jīng)被注冊(cè) 因?yàn)樵谟脩裘以黾恿?b>isUnique驗(yàn)證

用戶名已經(jīng)被注冊(cè)

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

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

官方給出了一個(gè)簡單實(shí)例:

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

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

github地址

package官網(wǎng)