表单验证——VeeValidate第三方库

HowieCong
327 阅读7分钟

🧑‍💻Veevalidate第三方库表单验证——HowieCong

一、背景

  • 用户注册、商品购买下单以及个人信息编辑等众多关键流程都涉及到各种表单填写

  • 表单包含众多字段，像用户名、密码、邮箱、手机号、收货地址等等，其数据的准确性直接关系到用户能否顺利完成注册、下单以及后续商品能否准确配送等核心业务流程

二、难点/困惑点

  • 手写验证函数：实现表单验证，随着业务的不断拓展和表单字段的日益复杂，代码量急剧增加，维护起来极为困难，随着业务规则细微变动，需要在大量散落的验证函数中查找并修改对应代码，稍有不慎就容易遗漏或引入错误

  • 复杂验证场景，比如密码强度验证（需要同时满足包含字母、数字、特殊字符等多种条件）、不同表单字段之间的关联验证（如确认密码要和密码一致、收货地址中的省市区要相互匹配等），手写验证函数实现起来代码冗长且逻辑混乱

  • 功能有限：Vue 内置指令进行简单验证，但发现其功能较为有限，很难满足我们项目中多样化、复杂化的验证需求，无法提供像自定义复杂验证规则、实时且友好的错误提示等关键功能

三、技术方案（采纳&淘汰）

  1. VeeValidate第三方库（专门为Vue.js设计的表单验证库）【采纳】

  • VeeValidate 是一个专为 Vue.js 设计的表单验证库，提供了强大的验证功能和灵活的配置选项，能够满足各种复杂的表单验证需求

  • VeeValidate 在代码量、维护性、复用性、功能丰富度和灵活性方面都具有显著优势

  1. 与手写验证函数对比【淘汰】

    1. 代码量：

      1. 不同： 手写验证函数需要几百行代码，使用VeeValidate只需要写几十行代码

      2. 结果： 少写约10倍代码量，工作效率提升约10倍

    2. 维护性：

      1. 手写函数在后期修改验证规则或者添加新规则时，需要多个地方修改，容易出错

      2. VeeValidate无论全局注册还是本地注册，都是将验证规则集中管理，而且规则定义是基于对象的，容易理解每个规则的作用

    3. 复用性：

      1. 手写验证函数如果要在其他组件或者项目中使用，需要进行复制且修改

      2. VeeValidate的验证规则可以方便地在整个应用或其他项目中复用，只需要正确地引入和注册即可

  2. Vue内置指令对比【淘汰】

    1. 功能丰富度

      1. Vue内置指令如 v-required提供了基本的验证功能，但对于复杂的验证场景不足，如异步验证，动态验证，自定义错误消息等

      2. VeeValidate可以轻松地实现，例如可以通过异步请求来验证一个用户名是否已经存在

    2. 灵活性

      1. VeeValidate根据不同的表单需求进行定制化的验证规则

      2. Vue内置指令相对较差

四、技术方案实现

  1. 安装： npm install vee - validate 或 yarn add vee - validate

  2. 引入： import{ ValidationProvider,ValidationObserver } from 'vee - validate'

  3. 注册验证规则

  • 针对不同的表单字段，在对应的组件中使用 VeeValidate 提供的 ValidationProvider 组件来包裹表单输入元素，并通过 rules 属性来指定相应的验证规则

  • VeeValidate为开发者提供了众多内置的验证规则，例如：

    • required（必填项）
    • email（邮箱格式）
    • confirmed（确认字段一致性）
    • min_length 和 max_length（限定输入长度）
    • alpha（仅字母）
    • between（限定数值范围）等。

  • 同时，它支持自定义规则，可以方便地扩展新的验证逻辑。

  • 例如，对于用户名字段，可以设置 required（必填）、min:3（最小长度为 3）等规则；对于邮箱字段，则设置 required 和 email（邮箱格式验证）规则

  • 对于一些特殊的自定义验证需求，比如密码强度验证，利用 VeeValidate 的 extend 方法来扩展自定义验证规则，编写对应的验证逻辑函数，并注册到验证规则中

（1）本地注册： 对于一些简单的自定义验证规则，可以在组件内部进行注册，eg：如果验证一个字段是否包含数字

import {extend} from 'vee - validate'; 
extend('isNumeric', { 
    validate: value => /^\d+$/.test(value), 
    message: '该字段必须只包含数字'
});

（2）全局注册： 如果一些通用的验证规则，在整个应用程序中都能使用，可以进行全局注册。可以在一个单独的文件（比如validation-rules.js）中定义所有的规则，然后再应用的入口文件（比如main.js）中进行引入和注册

import {extend} from 'vee - validate';
import {required, email} from 'vee - validate/dist/rules';
// 注册必填和邮箱验证规则
extend('required', required);
extend('email', email);
// 假设还有自定义规则，如上面的isNumeric
import {isNumeric} from './validation - rules';
extend('isNumeric', isNumeric);

  1. 在表单中使用验证规则

    1. 基本使用（单个字段验证）

    2. 复杂表单验证（多个字段关联验证）

  2. 以一个包含用户名、邮箱和密码的表单为例，使用VeeValidate可以这样定义

<form action="" @submit.prevent="handleSubmit">
  <input v-model="username" v-validate="'required'" type="text" name="username" />
  <span>{{ errors.first('username') }}</span>

  <input v-model="email" v-validate="'required|email'" type="email" name="email" />
  <span>{{ errors.first('email') }}</span>

  <input v-model="password" v-validate="'required|min:6'" type="password" name="password" />
  <span>{{ errors.first('password') }}</span>

  <button type="submit">Submit</button>
</form>

初始化VeeValidate：
this.$validator = new VeeValidate.Validator();

五、实现效果&价值

  1. 工作效率大幅提升 ：原本复杂繁琐的表单验证代码变得简洁明了，能够更快速地实现各种验证逻辑，相较于手写验证函数，工作效率提高了约 10 倍，大大缩短了项目开发周期

  2. 表单数据准确性增强 ：借助 VeeValidate 强大的验证规则，能够确保用户输入的数据符合业务要求，有效减少了因数据错误导致的各种问题，比如注册时因邮箱格式错误导致激活失败、下单时因收货地址不完整导致配送出错等情况，提升了整个业务流程的稳定性

  3. 用户体验优化 ：用户在填写表单时，能够实时收到清晰、准确的错误提示信息，方便其及时修正错误，避免了提交表单后才发现问题需要反复修改的困扰，极大地改善了用户在表单填写环节的体验

六、进阶讨论

（1）在一些对实时性要求极高的表单场景，比如实时搜索联想功能的输入框验证，VeeValidate 会不会有性能问题呢？

  • 在常规的表单验证场景下，VeeValidate 的性能表现是完全能够满足需求的。但对于像实时搜索联想这种对实时性要求极高的场景，确实可能会存在一定的性能考量

  • 因为 VeeValidate 默认是每次输入都会触发验证规则的校验，如果验证逻辑较为复杂，可能会导致一定的延迟，影响实时搜索的响应速度

  • 可以通过一些优化手段来解决这个问题，比如使用防抖（debounce）技术，设置一个短暂的延迟时间，在用户停止输入一段时间后再触发验证，这样既能保证一定的实时性，又能避免频繁触发验证带来的性能问题

  • 或者针对这种特殊场景，单独采用更轻量级的验证方式，只对关键的格式要求（如输入是否为字母或数字等简单规则）进行实时验证，而对于复杂的验证规则则在用户触发搜索按钮时再进行集中校验，从而在保证功能的同时兼顾性能

❓其他

1. 疑问与作者HowieCong声明

  • 如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 声明：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！

2. 作者社交媒体/邮箱-HowieCong

avatar
文章
阅读
粉丝