vue简单的input校验手机号

可以使用正则表达式来校验手机号。以下是一个简单的 Vue input 校验手机号的例子：

<template>
  <div>
    <label for="phone">请输入手机号：</label>
    <input type="text" id="phone" v-model="phone" @blur="checkPhone" />
    <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      phoneError: "",
    };
  },
  methods: {
    checkPhone() {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.phone)) {
        this.phoneError = "请输入正确的手机号";
      } else {
        this.phoneError = "";
      }
    },
  },
};
</script>

在这个例子中，我们使用了正则表达式 `/^1[3-9]\d{9}$/` 来校验手机号。这个正则表达式的意思是：

- `^` 表示字符串必须以指定的内容开头；
- `1` 表示手机号必须以数字 1 开头；
- `[3-9]` 表示第二个数字必须是 3 到 9 中的任意一个；
- `\d{9}` 表示后面必须跟着 9 个数字；
- `$` 表示字符串必须以指定的内容结尾。

如果输入的手机号不符合以上规则，就会在页面上显示错误信息。否则，错误信息会被清空。