vue2移动端使用vee-validate进行表单验证

Posted 2020-10-30 nanacln

使用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>