# vee-validate
# 2018/12/28學習筆記
## 修改成自定義的error message

import zh_TW from "vee-validate/dist/locale/zh_TW";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);
const dict = {
  custom: {
    phone: {  //name的名稱
      length: "長度必須為十個數字"  //vee-validate的判斷
    }
  }
};
Validator.localize("zh_TW", zh_TW);
Validator.localize("zh_TW", dict);

## 遇到input type 為 radio的時候的一個小bug~
input type='radio'的時候，加上vee-validate 的name的屬性後，會導致讓vue render失效，實際上不知道為什麼，但能確定是因為radio本來就需要用到name的屬性

# 2018/11/21學習筆記

## 如何使用兩組validate驗證？
使用data-vv-scope
## 以及如何使用regex來驗證輸入？
使用regex的話需要用物件方式{}傳參
## 別名設定？
別名使用data-vv-as

範例：

<el-input v-model="email" placeholder="信箱" v-validate="{ required: true,regex: /^auto$|^\d+$/}" data-vv-scope="form_2" data-vv-as="間隔" name="email"></el-input>
<span class="error">{{ errors.first('form_2.email') }}</span>

然後在判斷驗證的地方加上scope名稱

this.$validator.validateAll("form_2").then(result => {
        if (!result) {
          return false;
        }

        //success then do somethings
      });

# 2018/10/06學習筆記
## VeeValidate 驗證

<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>

methods: {
    onSubmit () {
      this.$validator.validate().then(result => {
        if (!result) {
          // do stuff if not valid.
        }
      });
    }
  }

## VeeValidate comfirm用法
將要比對驗證的欄位加上ref,然後在v-validate加上 comfirmed:{ref_name}

<input type="password" placeholder="Password" v-model="password" v-validate="'required'" name="password" ref="password"/>
<input type="password" placeholder="Confirm password" v-model="confirmPassword" v-validate="'required|comfirmed:password'" name="confirm_password"/>

## VeeValidate 配置語言，可以透過locale的api設定，也可以用i18n來配置
用Localization API

import zh_TW from 'vee-validate/dist/locale/zh_TW';
import VeeValidate, { Validator } from 'vee-validate';
Vue.use(VeeValidate);

Validator.localize('zh_TW', zh_TW);

用i18n

import VeeValidate from 'vee-validate';
     import zh_CN from 'vee-validate/dist/locale/zh_CN'
     import VueI18n from 'vue-i18n';
     Vue.use(VueI18n)
     const i18n = new VueI18n({
            locale: 'zh_CN',
     })
     Vue.use(VeeValidate, {
            i18n,
            i18nRootKey: 'validation',
            dictionary: {
               zh_CN
            }
    });