对vee-validate的封装使用

最新推荐文章于 2025-05-12 21:05:39 发布

原创

最新推荐文章于 2025-05-12 21:05:39 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #表单验证 #vue学习 #javascript

本文介绍了在前端项目中如何对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, // 错误提示的延迟时间
 &nb