vant 表单校验实现

最新推荐文章于 2024-08-14 11:24:38 发布

peade

最新推荐文章于 2024-08-14 11:24:38 发布

阅读量2.7w

点赞数 3

分类专栏： vue

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

版权

本文介绍了一种使用Vant Field组件结合blur事件实现表单自定义校验的方法。由于Field组件本身不支持复杂的校验，作者提出通过监听blur事件，在事件处理函数中进行数据校验，并根据结果设置error-message属性来显示错误提示，从而达到表单验证的效果。

摘要由CSDN通过智能技术生成

vant 里的input输入组件是Field，这个组件没有提供自定义校验的功能，只提供了email等特定几个值的校验。vant自身又没有form相关组件。

我们在开发的时候，总是免不了要用户填写表单，进行输入操作，这就免不了要对表单输入的值进行校验。

我之前的一篇博文介绍了vant + VeeValid做form表单校验的做法。

今天我在开发的时候，发现其实还有一个更简单的方式来实现表单校验的效果。Field组件的error-message属性值不为空时，就会显示出红色提示信息。根据这个原理，可以在Field组件上加上blur事件，在blur事件里，对数据进行校验，根据校验结果，对error-message进行赋值。

简单的示例代码：

<template>
  <div >
    <div class="content">
      <div class="title">绑定手机号</div>
      <van-field class="field-input" placeholder="手机号" v-model.trim="form.mobilePhone"
                 @blur="checkPhone" :error-message="errMsg.mobilePhone"   clearable
      />
      </van-field>
      <van-button type="info" >注&nbsp;册</van-button>
    </div>
  </div>
</te