vue中使用vee-validator表單校驗

前言

由於大部分移動端的組件庫都不提供表單校驗，因此需要自己封裝。目前，使用較多的是async-validator和vee-validator。其中，elementUI組件庫提供的表單驗證也是基於async-validator，vee-validator是一種基於vue模板的輕量級校驗框架。可以根據項目的需求，自行選擇合適的方案。本文主要討論的是vee-validator校驗方案。

表單校驗的封裝

在vue項目中，表單校驗是每個前端開發人員都避免不了的需求。校驗的好處可以避免無用的http請求，及校驗不通過不發送請求，也可以提高用戶的體驗效果。

安裝

npm install vee-validate --save

引入

一般我們會在src目錄下新建一個文件夾，裏面新建一個validator.js和validatorRule.js文件。validator.js文件用來引入我們的vee-validtor，validatorRule.js文件用來定義校驗的規則，當然還需要在main.js中註冊，如果使用國際化組件。

main.js文件配置

import VueI18n from 'vue-i18n'  // 國際化插件
import {Validator} from 'vee-validate'  // 表單校驗組件
let language = 'zh_CN'

Vue.use(VueI18n)
Validator.locale = language
const i18n = new VueI18n({
  locale: language,
  messages
})

new Vue({
  i18n
})

validator.js文件中引入

import Vue from 'vue'
import VeeValidate from 'vee-validate'

// 全局註冊
Vue.use(VeeValidate)

規則設置

vee-validator默認是不自動導入提示語言包，所以得自己導入，一般只需要中文文件，但是還有一些需求是要支持國際化，所以要導入中英文插件。

// 引入中文文件
import zhCN from 'vee-validate/dist/locale/zh_CN'
// 引入英文文件
import en from 'vee-validate/dist/locale/en'

// 添加中文校驗規則設置
Validator.localize('zh_CN', {
 //  提示語
  messages: zhCN.messages,
  // 提示語的信息在此設置，下面會提到
  attributes: attributesCh
})
// 添加英文校驗規則設置
Validator.localize('en', {
  messages: en.messages,
  attributes: attributesEn
})

自定義規則

下面封裝方法實現校驗，其中

• validName：驗證規則的名稱，在元素上使用時，就是用這個值
• errMsgZh：中文錯誤提示
• errMsgEn：英文錯誤提示
• validate：校驗規則方法，在這個方法裏，你可以自己去實現你的校驗規則

但大多數時候，推薦使用正則表達式，正則實則不了的，再去做特殊處理

export function setMessage(validName, errMsgZh, errMsgEn, validate) {
  Validator.locale = 'en'
  自定義驗證規則,取名爲validName, 通過該方式使用v-validate="'required|phone'"
  Validator.extend(validName, {
    // 提示信息，不符合規則提示語
    getMessage: (field, [args]) => {
      return errMsgEn
    },
    // 驗證規則，符合規則通過，否則不通過 (規則爲美國電話號碼)
    validate: validate
  })
  Validator.locale = 'zh_CN'
  Validator.extend(validName, {
    getMessage: (field, [args]) => {
      return errMsgZh
    },
    validate: validate
  })
}

規則方法應用

validatorRule.js中引入方法，定義具體的校驗規則,下面只列舉兩種規則，其他校驗規則可自行百度。

import {setMessage} from '../validate'

setMessage('phoneNum', '手機號不正確', 'phoneNum error', (value, [args]) => {
  const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
  return reg.test(value)
})
setMessage('personName', '姓名只能包括中文字或英文字母', 'username no yes', (value, [args]) => {
  const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
  return reg.test(value)
})

別名設置

使用vee-validate內部提供的驗證規則時，如果不使用別名，就會固定使用當前元素的name值去顯示錯誤信息，如我下面所示如果我不使用別名，使用非空驗證，當在中文環境下，就會顯示，myPhone是必須的，這樣用戶是無法知道myPhone是什麼的，所以對應別名例用戶更好分辨對應的元素別名設置規則，key是你元素的name屬性，value是有錯誤信息是展示的值

1、別名中文

export const attributesCh = {
  relation: '關係',
  relationDesc: '關係描述',
  personName: '姓名',
  accountName: '賬戶名',
  gender: '性別',
  phone: '手機號'
  ...
}

2、別名英文

export const attributesEn = {
  phoneNum: 'phoneNum',
  userName: 'name',
  idCard: 'idCard',
  zipCode: 'zipCode',
  personMail: 'Email',
  addressDetail: 'address',
  isSmoker: 'isSmoker'
  ...
}

好了封裝基本就是這麼簡單，最後貼出完整的代碼。

validator.js文件。

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zhCN from 'vee-validate/dist/locale/zh_CN'
import en from 'vee-validate/dist/locale/en'

import {attributesCh, attributesEn} from 'common/js/validateRule'

Vue.use(VeeValidate)

Validator.localize('zh_CN', {
  messages: zhCN.messages,
  attributes: attributesCh
})
Validator.localize('en', {
  messages: en.messages,
  attributes: attributesEn
})

export function setMessage(validName, errMsgZh, errMsgEn, validate) {
  Validator.locale = 'en'
  Validator.extend(validName, {
    getMessage: (field, [args]) => {
      return errMsgEn
    },
    validate: validate
  })
  Validator.locale = 'zh_CN'
  Validator.extend(validName, {
    getMessage: (field, [args]) => {
      return errMsgZh
    },
    validate: validate
  })
}

validatorRule.js文件

import {setMessage} from 'common/js/validate'
import {idCardNoUtil} from 'common/js/validateExternal'

setMessage('phoneNum', '手機號不正確', 'phoneNum error', (value, [args]) => {
  const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
  return reg.test(value)
})
setMessage('personName', '姓名只能包括中文字或英文字母', 'username no yes', (value, [args]) => {
  const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
  return reg.test(value)
})
// 別名中文
export const attributesCh = {
  relation: '關係',
  relationDesc: '關係描述'
  ...
}
// 別名英文
export const attributesEn = {
  phoneNum: 'phoneNum',
  userName: 'name',
  idCard: 'idCard'
  ...
}

如果喜歡的話，就給個♥吧。。。。。