Vant + VeeValidate 3 实现表单验证

最新推荐文章于 2025-09-12 00:38:00 发布

peade

最新推荐文章于 2025-09-12 00:38:00 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/peade/article/details/104251029

本文介绍了在Vant移动端开发中遇到复杂表单验证需求时，由于Vant自身验证功能有限，转向使用VeeValidate库进行表单验证的过程。VeeValidate是一个专业的Vue表单验证解决方案，但网上的教程多基于旧版本，作者通过阅读最新文档，成功创建了一个简单的Demo，以适应当前版本的VeeValidate。

之前一直使用vant做移动端开发，也都没做到太复杂的表单输入。简单的输入，都是直接弹窗提示就行。这次做的需求，在页面上有许多内容要输入。查看vant文档时发现，vant自带的表单校验功能非常孱弱，Field组件自身也不支持自定义校验。【据vant在git上的开发计划2020年上半年回增加form相关组件，到那个时候，应该就有原生支持了】。

网上查了一通，vue进行表单校验的，有个库VeeValidate，是专业做表单校验的。也有挺多人用这个库来实现表单校验的。网上查了下，很多人在博客上写的，都是VeeValidate的早些版本代码，并不适用现在最新的版本。
我下午看了一下文档，挺简洁易懂的，自己简单写了个demo。

<template>
  <div>
    <h3>注册</h3>
    <validation-observer ref="form">
      <form class="input-div">
        <validation-provider rules="mobileRequired|mobilePhone" v-slot="{ errors }">
          <van-field class="field-input" placeholder="手机号"  v-model.trim="regForm.mobileNumber"
                     clearable
                     :error-message="errors[0]||errors[1]"
          />
        </validation-provider>
        <validation-provider>
          <van-field class="field-input" placeholder="验证码" size

最低0.47元/天解锁文章