对vee-validate的封装使用

赋予不予

于 2019-04-30 17:02:51 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript vue 文章标签：前端表单验证 vue学习 javascript

本文链接：https://blog.youkuaiyun.com/qq_33276623/article/details/89712731

版权

本文介绍了在前端项目中如何对vee-validate进行封装，包括版本选择、基础配置、提交逻辑处理、全局绑定及页面使用。通过封装，实现表单验证的便捷性和用户体验的提升，同时也提供了自定义验证规则的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为前端，表单验证很重要了。本博客主要介绍对vee-validate在实际项目中进一步封装使用。

引入vee-validate

```
npm install vee-validate@2.0.0-rc.25
```
注意版本号，此版本中文包支持的最好。

2. 引入基本配置，在main.js里加入下面代码

//validator
    import VeeValidate, {Validator} from 'vee-validate'
    import zh from 'vee-validate/dist/locale/zh_CN'// 引入中文文件
    // 配置中文
    Validator.addLocale(zh)    const config = {
      errorBagName: 'errors', // change if property conflicts.
      fieldsBagName: 'fieldBags',  // 报冲突时 可自定义修改字段名称
      delay: 0, // 错误提示的延迟时间
      strict: true, // 没有设置规则的表单不进行校验，
      enableAutoClasses: false,
      locale: 'zh_CN', // 对语言（中文）的配置
      classNames: {
        touched: 'touched', // the control has been blurred
        untouched: 'untouched', // the control hasn't been

最低0.47元/天解锁文章