vue移动端手机号正则表达式

可以使用 Vue 的 v-model 指令与 input 事件来实现在 input 框中加入手机号码的正则表达式验证。

首先，在 input 标签中添加 v-model 指令，并绑定一个名为 phoneNumber 的变量：

<template>
  <div>
    <input type="tel" v-model="phoneNumber" @input="checkPhoneNumber"/>
  </div>
</template>

接下来，在 Vue 实例的 methods 属性中定义一个 checkPhoneNumber 方法来验证手机号码。

export default {
  data() {
    return {
      phoneNumber: ''
    }
  },
  methods: {
    checkPhoneNumber() {
      const phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(this.phoneNumber)) {
        this.phoneNumber = this.phoneNumber.slice(0, -1) // 如果不是有效的手机号码，则删除最后一位数字
      }
    }
  }
}

在 checkPhoneNumber 方法中，我们首先通过正则表达式 /^1[3456789]\d{9}$/ 验证输入的手机号码是否合法。如果不是合法的手机号码，则从字符串的末尾删除最后一个字符。

这样，每当用户在 input 框中输入一个字符时，都会触发 input 事件并执行 checkPhoneNumber 方法进行验证。如果输入的字符不符合要求，就会自动被删除。

注意，这里的 type="tel" 属性可以让输入框默认弹出数字键盘，更符合手机号码的输入需求。