Vee Validate 基本使用

一、前言

以前在項目中主要使用的是 Element-ui ，這里用到的數據驗證主要是在 form 中綁定 rules，進行一些數據的驗證。

最近在新的項目中接觸到 Vee Validate 這個驗證數據的。

二、導入基本使用

1、添加包

# install with npm
npm install vee-validate --save

# install with yarn
yarn add vee-validate

2、在項目中引入

（這里是用 Vue）

// VeeValidate
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

這樣簡單配置后就可以使用了。

3、簡單驗證

    <vs-row class="py-4" vs-w="12">
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="12">
        <vs-input v-validate="'required|email'" v-model="email" style="width:95%" type="email" label-placeholder="Email" name="email" />
      </vs-col>
    </vs-row>

上面代碼中使用了 v-validate 指令綁定了對應的驗證規則（required 和 email 是自帶的驗證規則）

下面是在提交的時候看是否驗證通過

    handleSignUpClick() {
      const _this = this
      this.$validator.validateAll().then(result => {
        if (result) {
　　　　　// 驗證通過后具體操作
　　　　　}
      })
    }

基本的用法這些就可以了，下面介紹些其他用法。

三、中文配置

這個庫默認的錯誤提示都是英文的，下面是進行中文的配置。

直接全局進行配置

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

這樣在提示錯誤的時候就是中文了。

四、自定義驗證規則和錯誤提示

在實際使用中，會遇到一些定制性的驗證、提示等功能。

Vee Validate 支持自定義定義這些。

// Vue 組件中使用
<script>
const validate = {
  custom: {
    code: {
      required: () => '驗證碼不能為空', // 寫法1
      length: '驗證碼必須為6位數字'// 寫法2
    }
  }
}

export default {
  mounted() {
    // 加載自定義錯誤提示
    this.$validator.localize('zh_CN', validate)
    // 添加自定義驗證規則
    this.$validator.extend('mobile', {
      getMessage: field => '請輸入正確手機號',
      validate: value => {
        return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      }
    })
  }
}

從上面看出，加載自定義錯誤提示是通過 locallize 函數加載的，添加自定義規則是通過 extent。

上面介紹的這些在日常項目中基本都夠用了。

只是在添加自定義的驗證規則時，主要還是靠正則表達式才能達到效果。

下面是項目中用到的密碼驗證規則（拿來參考）

// 驗證密碼規則    
this.$validator.extend('passwordrule', {
      getMessage: field => '密碼需要是一個至少包含一個大寫字母、小寫字母、數字的字符串',
      validate: value => {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)
      }
    })

 最后

Vee Validate 官方文檔 

借鑒文章