VeeValidate的使用方法

官網： http://vee-validate.logaretm....

引入：

npm install vee-validate --save

vue代碼：

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包，提示信息能夠以中文形式顯示
import { Validator } from 'vee-validate';

Validator.addLocale(zh_CN); // 設置提示信息中文方式顯示

const config = {
  errorBagName: 'errors', 
  fieldsBagName: 'fields',
  delay: 100,   
  locale: 'zh_CN', 
  strict: true,  
  enableAutoClasses: true,
  events: 'blur', 
  inject: true
};
Vue.use(VeeValidate, config); //通常插件都要use一下

config配置信息

插件的一些功能能夠自定義，須要編寫config，而後Vue.use(VeeValidate, config)來使用
一下爲配置信息的意思（可能不全面）

• errorBagName： 'erroers'

  全部的錯誤信息都是放在這個裏面的，若是名稱和頁面上的變量名字衝突，須要修改爲其餘的，當是errors.fist的時候，error就是字符串，當使用error.all()/error.collect()的時候就是數組

• fieldsBagName: 'fields'

  字段的名稱（標誌）的對象，將在每一個Vue的實例數據注入。若是在頁面上使用了ip的驗證，那麼，能夠經過以下獲取一個對象:

this.fileds.ip
 >> 獲取到的對象：
{
    dirty :true
    invalid:false
    pending:false
    pristine:false
    required:true
    touched:true
    untouched:false
    valid:true
    validated:true
}

• delay : 100

  表示獲取輸入信息的時間

• locale： ‘zh_CN’

  驗證消息的默認語言。

• strict: true

  表示沒有設置規則的表單不進行驗證

• classes (不懂)

• events: 'blur|input'

  默認是input|blur 就是在用戶輸入和表單失去焦點的時候都進行驗證，blue表示失去焦點的時候進行驗證

自帶規則

after／before

❌

<input v-validate="'required|after: 01/01/2010'" name="日期" type="text" placeholder="填入日期應該在01/01/2010以後">

我理解的是向上面同樣寫，可是無論我輸入什麼日期，一直會提醒錯誤，若是有知道正確寫法的朋友，但願能指點下

alpha

<input v-validate="'required|alpha'" name="" type="text" placeholder="只能輸入字符串">

alpha_dash

<input v-validate="'required|alpha_dash'" name="" type="text" placeholder="能輸入字母數字破折號下劃線">

alpha_num

<input v-validate="'required|alpha_num'" name="" type="text" placeholder="能輸入字母數字">

alpha_spaces

<input v-validate="'required|alpha_spaces'" name="" type="text" placeholder="能輸入字母空格"><br>

between

<input v-validate="'required|between: 1,10'" name="" type="text" placeholder="1-10">

confirmed ：通常用於須要再次輸入的驗證，好比密碼的再次輸入

<input v-validate="'required|confirmed:123'" name="password" type="text" placeholder="輸入的內容要和123相同">

credit_card

<input v-validate="'required|credit_card'" name="password" type="text" placeholder="輸入的內容格式是信用卡的號碼格式">

date_between

<input v-validate="'required|date_between:10/09/2016, 20/09/2016'" name="日期" type="text" placeholder="輸入的日期要在10/09/2016和20/09/2016之間">

date_format

<input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="輸入的日期格式要是MM/DD/YYYY">

decimal

<input type="text" v-validate="'decimal:2'" name="" placeholder="輸入的數字的小數點個數是2">

digits

<input type="text" v-validate="'digits:2'" placeholder="數字長度是兩位">

dimensions

<input type="file" v-validate="'dimensions:10,10'" placeholder="上傳的圖片是10像素到10像素">

email

<input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="輸入的日期格式要是MM/DD/YYYY">

ext

<input type="file" v-validate="'ext: zip, png'" placeholder="上傳文件後綴名限制爲zip和png">

image

<input v-validate="'required|email'" name="email" type="text" placeholder="輸入內容爲email格式">

in ／ not_in

<select name="" v-validate="'in:1,3,4'">
        <option value="1">One</option> 
        <option value="2">Invalid</option> 
        <option value="3">Three</option> 
        <option value="4">Four</option>
    </select>

ip

<input v-validate="'required|ip'" name="ip" type="text" placeholder="輸入內容爲ip格式">

max

<input type="text" v-validate="'max:10'" name="" placeholder="字符串最大長度是10,空格也計算在內">

max_value

<input type="text" v-validate="'max_value:100'" placeholder="輸入的數字最大爲100">

mimes

<input v-validate="'required|mimes:[image/jpeg,image/png]'" name="mimes" type="file」 >  mimes: [裏面能夠寫文件類型] 若是是寫image好像不辨別

min

<input type="text" v-validate="'min:5'" placeholder="輸入的字符長度最小爲最大爲5">

min_value

<input type="text" v-validate="'min_value:5'" placeholder="輸入的數字最小爲5">

numeric

<input type="text" v-validate="'numeric'" placeholder="輸入的數字最小爲5">

regex

<input type="text" v-validate="'regex:^([0-9]+)$'" placeholder="regex後面能夠寫正則表達式，匹配輸入的內容">

required

<input v-validate="'required'" name="username" type="text" placeholder="內容必須填寫">

size

<input type="file" v-validate="'size:100'" placeholder="上傳文件大小限制，必須小於100kb">

url

<input v-validate="'required|url'" name="url" type="text" placeholder="輸入內容格式爲url">

rules

<input type="text" v-validate="{ rules: { regex: /^([0-9]+)$/, max_value:100 } }" placeholder="使用rules能夠組合使用規則">

自定義部分

自定義規則：

Validator.extend('qq', {
  messages: {
 zh_CN:field => 'qq號碼輸入不正確'
  },
  validate: value => {
 // 獲取輸入的value
 return /^[1-9][0-9]{4,14}$/.test(value);
  }
});

自定義提示信息

const dictionary = {
  zh_CN: {
    messages: {
      email: () => '郵箱格式不正確哦>.<'
    }
  }
};
Validator.updateDictionary(dictionary);

未完。。。