veeValidate實戰

說在前面

vee-validate 版本2.0.4的學習github地址
個人項目地址
第一次認真的在git上寫一個demo教程，喜歡的能夠star一下~^o^~ (^-^) (^o^)
後續會有一個完整的vue商城項目教程，但願獲得你們的鼓勵

分支說明

一步一步學習veeValidate，雖然是個小的demo，可是但願可以跟你們分享
經過建立多個分支，表示項目的進度，每一個分支的複雜程度遞增。

初始化vue項目

網上不少教程，再也不贅述

Lesson1 搭建靜態樣式

lesson1分支連接

Lesson2 安裝veeValidate初體驗

Lesson2分支
安裝

npm install vee-validate --save

main.js中引入

home.vue使用

效果圖

在想驗證的input框添加v-validate指令。多個驗證規則用|分隔。對於下面的示例，驗證規則是直截了當的。這裏使用了一個必填的驗證。這裏使用button的disabled屬性來控制是否能夠下一步在計算屬性中返回this.$validator.errors.has('name')若是error存在則disabled爲true

Lesson3 使用中文錯誤提示

爲了更好的使用vee-validate在src下新建文件夾而且建立文件validator.js
在main.js中引用validator.js，以前引用的代碼將移入validator.js

接下來安裝vue國際化

npm install vue-i18n --save

引用

import Vue from "vue";
import VeeValidate from "vee-validate";
import VueI18n from "vue-i18n";
import zh_CN from "vee-validate/dist/locale/zh_CN";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "zh_CN"
});
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: "validation",
  dictionary: {
    zh_CN
  }
});

而後效果圖就是這樣的了，這裏的name是必須的對於一箇中國人來講就有點不舒服了。
下一步就是將修改默認顯示的錯誤信息

引入Validator

import  { Validator } from "vee-validate";

或者合併使用import VeeValidate, { Validator } from "vee-validate";

// 自定義validate
const Dictionary = {
  zh_CN: {
    messages: {
      required: field => "請輸入" + field
    },
    attributes: {
      name: "帳號"
    }
  }
};
// 自定義validate error 信息
Validator.localize(Dictionary);

效果

Lesson4 點擊完成下一步實現自定義驗證規則

添加以前漏掉的一點，一開始進入的時候按鈕是不可點的全部添加

一進入就驗證

接下來新增點擊下一步點擊頁面
Step1.vue

<template>
  <div class="form-box">
    <p>自定義驗證規則學習</span>
    <form class="sui-validate" method="" name="" @submit.prevent="submit">
      <div class="controls">
        <input name="mobile" type="text" v-model="name" placeholder="請輸入電話" v-validate="'required|mobile'">
        <span v-show="errors.has('mobile')" class="help">{{ errors.first('mobile') }}</span>
      </div>
      <button class="button" type="submit" :disabled="disabledFlag">下一步</button>
    </form>
  </div>
</template>
<script>
  export default {
    name: 'Step1',
    data() {
      return {
        name: ''
      }
    },
    computed: {
      disabledFlag() {
        //驗證不經過button disabled
        return this.$validator.errors.has('mobile')
      }
    },
    methods: {
      submit() {

      }
    }
  }

</script>

router.js

Home.vue驗證成功後點擊下一步跳到Step1.vue

methods: {
      submit() {
          this.$router.push({name:'step1'})
      }
    }

validator.js添加自定義方法

/*自定義方法*/
Validator.extend("mobile", {
  getMessage: field => "手機格式不正確",
  validate: value =>
    value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});

新增手機屬性

新增的自定義方法就能夠用了這裏值得注意的是，自定義方法要放在自定義錯誤消息上面，要不錯誤信息會有問題