H5项目使用vant组件的手机号校验

前言：
在开发h5项目的时候遇到手机号校验，原本想采用后台管理那种校验方式（validator函数写校验手机号逻辑）猛然间发现，可以在使用行内使用pattern属性

用法如下

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="userPhone"
      name="手机号"
      label="手机号"
      placeholder="手机号"
      :rules="[{ required: true, message: '请填写手机号' },{message:'手机格式错误',pattern:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)}]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>
...

这样写方便快捷,同样能达到校验效果