vant 表单校验实现

最新推荐文章于 2026-06-29 10:12:43 发布

原创最新推荐文章于 2026-06-29 10:12:43 发布 · 2.8w 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

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

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>
</template>

<script>
import { checkPhone } from '../util/validate'

export default {
  name: 'Demo',
  components: {},
  mixins: [],
  props: {},

  data() {
    return {
      form: {
        mobilePhone: ''
      },
      errMsg: {
        mobilePhone: ''
      }
    }
  },



  methods: {
    checkPhone() {
      if (!this.form.mobilePhone) {
        this.errMsg.mobilePhone = '请填写手机号码！'
        return false
      } else if (!checkPhone(this.form.mobilePhone)) {
        this.errMsg.mobilePhone = '手机号格式不正确！'
        return false
      } else {
        this.errMsg.mobilePhone = ''
        return true
      }
    }
  }
}
</script>