使用vee-validate時若要使用中文版本提示時，vee-validate的版本需要註意

"vee-validate": "2.0.0-rc.25"

在main.js裏添加如下代碼

import VeeValidate, { Validator } from ‘vee-validate‘
import CN from ‘vee-validate/dist/locale/zh_CN.js‘
Validator.addLocale(CN)
Vue.use(VeeValidate, {
  locale: ‘zh_CN‘
})

若想修改默認的提示

// 修改默認錯誤提示
const dictionary = {
  zh_CN: {
    messages: {
      email: () 
 
=> ‘郵箱格式不正確哦‘,
      required: (val) => {
        let msg = ‘‘
        switch (val) {
          case ‘email‘:
            msg = ‘郵箱‘
            break
          case ‘qq‘:
            msg = ‘qq‘
            break
          default:;
        }
        msg = msg + ‘不能為空哦‘
        return msg
      }
    }
  }
}
Validator.updateDictionary(dictionary)
 

自定義校驗規則如下：

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

以上代碼寫在js裏。組件內進行表單驗證的代碼如下

<template>
  <div class="hello">
    <form @submit.prevent="validateBeforeSubmit">
      <div class="column is-12">
        <label class="label" for
 
="email">Email</label>
        <p :class="{ ‘control‘: true }">
            <input v-validate="‘required|email‘" v-model="email" :class="{‘input‘: true, ‘is-danger‘: errors.has(‘email‘) }" name="email" type="text" placeholder="Email">
            <span v-show="errors.has(‘email‘)" class="help is-danger">{{ errors.first(‘email‘) }}</span>
        </p>
      </div>
      <div class="column is-12">
        <label class="label" for="qq">qq</label>
        <p :class="{ ‘control‘: true }">
            <input v-validate="‘required|qq‘" :class="{‘input‘: true, ‘is-danger‘: errors.has(‘qq‘) }" name="qq" type="text" placeholder="qq">
            <span v-show="errors.has(‘qq‘)" class="help is-danger">{{ errors.first(‘qq‘) }}</span>
        </p>
      </div>
      <div class="column is-12">
          <p class="control">
              <button class="button is-primary" type="submit">Submit</button>
          </p>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      email: ‘‘,
      qq: ‘‘
    }
  },
  methods: {
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        if (result) {
          // eslint-disable-next-line
          alert(‘Form Submitted!‘);
          return
        }

        alert(‘Correct them errors!‘)
      })
    }
  }
}
</script>

vue2移動端使用vee-validate進行表單驗證