vue Design vue的输入框对手机号进行正则判断代码

可以通过使用`v-model`和`v-on:input`来实现对输入框进行实时正则判断。

首先，在`<template>`中添加一个输入框和一个错误提示信息：

<template>
  <div>
    <label>手机号码：</label>
    <input type="text" v-model="phone" v-on:input="checkPhone">
    <span v-if="phoneError" style="color:red;">{{ phoneError }}</span>
  </div>
</template>

然后，在`<script>`中定义`phone`和`phoneError`两个变量，并且实现`checkPhone`方法，该方法会在每次输入框内容发生变化时被调用，用来判断输入的手机号是否符合正则表达式：

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

这里使用了正则表达式`/^1[3456789]\d{9}$/`，表示手机号码必须以1开头，第二位为3-9之间的数字，后面跟着9位数字，总共11位。如果输入的内容符合这个正则表达式，就将`phoneError`清空，否则就将其设置为一个错误提示信息。

这样，每当用户输入手机号码时，输入框下面的错误提示信息就会实时更新，提醒用户是否输入了正确的手机号码。