前端框架Vue（8）——Vue + 表單驗證 VeeValidate 實踐

  此次來說一下表單驗證插件 VeeValidate,那爲何要結合 Vue 來說呢？來看一下 github 上的圖片就明白了！

  爲 Vue 而來的！不清楚是否是 Vue 的官方表單驗證插件。

  廢話很少說直接顯示效果：

===============================分隔線==================================

  爲何須要用表單驗證插件，想一想本身重寫過幾回表單驗證，重複造輪子至關的痛苦，固然你能夠本身造一套通用的組件。我比較懶，表單驗證就用現成的，VeeValidate 可擴展性也不錯，因此就使用它來作表單驗證。

  jquery.validate 也是不錯的選擇，這是後話了，本文就只介紹 VeeValidate 在 Vue 中的實踐。

一、安裝

  支持3中方式的引入項目

npm

npm install vee-validate --save

bower

bower install vee-validate#2.0.0-rc.4 --save

CDN

https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js

二、配置和使用

  我是使用 npm 安裝，注入依賴。這邊配置使用主要是3個文件。

=====validate.js ：本身建立一個文件，單獨將關於表單驗證的代碼抽離出來，從 node_modules 中引入 VeeValidate，配置相關項
=====main.js ：vue 主文件入口，引入validate.js
=====form.vue ：表單組件

首先附上validate.js中的代碼：

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//引入中文文件

// 配置中文
Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);

// 自定義validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '請輸入正確的郵箱格式',
        required: ( field )=> "請輸入" + field
      },
      attributes:{
        email:'郵箱',
        password:'密碼',
        name: '帳號',
        phone: '手機'
      }
  }
};

Validator.updateDictionary(dictionary);

Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必須是11位手機號碼',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

從上往下分別是:

一、引入表單驗證依賴文件，而且引入的是支持中文錯誤提示的文件。

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//引入中文文件

二、進行中文錯誤提示的配置。

// 配置中文
Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);

三、若是你想自定義表單驗證的提示語，不配置有默認。

// 自定義validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '請輸入正確的郵箱格式',
        required: ( field )=> "請輸入" + field
      },
      attributes:{
        email:'郵箱',
        password:'密碼',
        name: '帳號',
        phone: '手機'
      }
  }
};

Validator.updateDictionary(dictionary);

message ： 提示語。
attributes： 就是 filed。

四、擴展自定義的驗證，好比這邊自定義了電話的表單驗證。

Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必須是11位手機號碼',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

main.js中的代碼：

import './static/js/validate.js'

只須要將 validate.js 引入主文件入口就完成了鋪路工做，如今就能夠開始寫表單界面了。

form.vue 組件中的代碼：

<div class="layui-form-item">
    <label class="layui-form-label">帳戶</label>
    <div class="layui-block">
        <input v-model="name" v-validate="'required|min:3|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" name="name" class="layui-input" placeholder="帳戶">
        <span v-show="errors.has('name')" class="text-style" v-cloak> {{ errors.first('name') }} </span>
    </div>
</div>

這是其中的一個 input 拿出來說：

一、首先在 input 中你得有 name 屬性。

二、v-validate 屬性：管道形式進行過濾，驗證條件。

三、span 就是錯誤提示 。

errors.first('field') -- 獲取關於當前field的第一個錯誤信息
collect('field') -- 獲取關於當前field的全部錯誤信息(list)
has('field') -- 當前filed是否有錯誤(true/false)
all() -- 當前表單全部錯誤(list)
any() -- 當前表單是否有任何錯誤(true/false)

  到這邊你能夠完成基礎的表單驗證了，不一樣的項目都會有不一樣的需求，表單驗證也不同，可是 VeeValidate 支持你去擴展，完成各類不一樣的需求。你能夠參照着官網文檔，造一個本身的表單驗證，這樣不一樣項目時只須要進行簡單的修改就能用上了。

---

  VeeValidate 具有豐富的文檔：

    官網地址傳送門

    優秀文章：
        一、vee-validate 表單驗證
        二、Vue2.0表單校驗組件vee-validate的使用