vant 表单校验 实现

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