在後端項目裏 好比咱們的Laravel
框架 對於表單驗證有本身的一套validation
機制 他將驗證集成在FormRequest
css
咱們只須要在咱們的方法中依賴注入咱們本身實例化後的驗證類 固然也能夠直接去在方法裏去驗證表單數據html
而在咱們的前端的項目裏 也就是在咱們的vue
項目裏 也有比較好的驗證解決方案 也就是這的vuelidate
前端
和咱們安裝前端包同樣 在項目終端執行: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')
其實使用起來真的很方便 下面舉例來講就是在個人項目裏的使用數據庫
在用戶註冊時 咱們一般的須要處理的表單字段就是name
,email
,password
,confirm_pwd
npm
首先我在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
上面也有實例 說簡單點就是設置這個以及子節點的$dirty
爲true
或者false
而設置這個$dirty
再結合 $invalid
就能夠判斷驗證成功與否
$error
是由$dirty
和$invalid
共同決定的在這裏的驗證規則流程是這樣的 若是
$error
爲true
那麼form-group
會添加一個form-group--error
這個class
只有在$error
爲true
時 若是你不符合任意一個驗證規則 例如不符合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; }
密碼驗證其實和上面的差很少 只不過他的驗證規則時經過 sameAs
來進行驗證的
除了上面這些還有一個組合驗證 也就是若是任意一個不符合驗證規則就不經過 這個仍是挺經常使用的
咱們能夠在驗證字段這樣去組合:
validations: { flatA: { required }, flatB: { required }, forGroup: { nested: { required } }, validationGroup: ['flatA', 'flatB', 'forGroup.nested'] }
若是任意一個就是FlatA flatB forGroup
其中一個不符合驗證規則 那麼$v.validationGroup.$error
就是false
特別是在驗證惟一性的時候 咱們確定會遇到這樣的一個場景:
就好比咱們的郵箱 若是已經註冊過這個郵箱了 那麼再用這個郵箱去註冊顯然不是咱們想要的
還有就是咱們登陸時咱們須要去核對咱們的用戶的密碼
這邊我給出的實例就是對於用戶名的註冊 若是已經註冊了就會提示已經註冊過
徹底支持
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>
顯示結果應該是這樣的:
一樣的咱們不只可使用它提供給咱們的驗證規則 咱們也能夠自定義驗證規則並與以前的進行組合
官方給出了一個簡單實例:
export default value => { if (Array.isArray(value)) return !!value.length return value === undefined || value === null ? false : !!String(value).length }