vue 表单验证手机号

Vue 表单验证手机号可以通过以下步骤来实现：

1. 首先在 HTML 中定义一个手机号的输入框，可以使用 `<input>` 标签，例如：

<input type="tel" v-model="phone" placeholder="请输入手机号">

2. 在 Vue 的 data 中定义 phone 变量，并初始化为空：

data() {
  return {
    phone: ''
  }
}

3. 使用 computed 属性来监听 phone 变量的变化，并进行验证：

computed: {
  isPhoneValid() {
    const reg = /^1[34578]\d{9}$/;
    return reg.test(this.phone);
  }
}

这里使用正则表达式来进行手机号的验证，正则表达式 `^1[34578]\d{9}$` 表示以1开头，第二位为3、4、5、7、8之一，后面跟着9位数字。

4. 在 HTML 中使用 `v-bind:class` 绑定样式，并根据 `isPhoneValid` 的值来决定添加哪个样式：

<input type="tel" v-model="phone" placeholder="请输入手机号" :class="{ 'is-invalid': !isPhoneValid, 'is-valid': isPhoneValid }">

这里 `is-invalid` 和 `is-valid` 是自定义的样式类，当 `isPhoneValid` 为 true 时添加 `is-valid` 样式类，当 `isPhoneValid` 为 false 时添加 `is-invalid` 样式类。

5. 最后，在 HTML 中添加一个显示验证结果的元素：

<div v-if="!isPhoneValid" class="invalid-feedback">
  请输入正确的手机号
</div>

这里使用了 `v-if` 指令来判断手机号是否合法，当 `isPhoneValid` 为 false 时显示提示信息。