vee-validate中文提示文案修改与配置

2023-11-12 18:15:35

前言

在开发vue项目时，常常会用到数据校验，而vee-validate就是一款不错的工具，使用方便，并且还支持国际化，我们可以很方便地修改验证表单时的文案内容，以支持中文提示，满足用户对语言的需求。

配置

首先，需要安装vee-validate库，使用cnpm命令：

cnpm install vee-validate

然后，在main.js中引入vee-validate

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

使用i18n进行配置

export default {
  install(Vue) {
    Vue.prototype.$veeValidate.validator.localize('zh_CN', {
      messages: {
        required: (field) => field + '是必填项',
        alpha: (field) => field + '只能包含字母',
        email: (field) => field + '不是有效的电子邮件地址',
        min: (field, { length }) => field + '最小长度为' + length,
        max: (field, { length }) => field + '最大长度为' + length,
      },
    })
  },
}

然后在需要使用的地方调用

<script>
import VeeValidate from 'vee-validate'

export default {
  name: 'example',
  components: {
    VeeValidate,
  },
  data() {
    return {
      form: {
        name: '',
        email: '',
      },
      rules: {
        name: {
          required: true,
          alpha: true,
        },
        email: {
          required: true,
          email: true,
        },
      },
    }
  },
}
</script>