el-input正则校验手机号怎么使用

你可以使用el-input组件的属性validator来实现正则校验手机号。具体步骤如下：

1. 在el-input组件中设置validator属性，将其值设置为一个函数。

<el-input v-model="phone" placeholder="请输入手机号" :validator="checkPhone"></el-input>

2. 在methods中定义checkPhone函数，使用正则表达式判断手机号是否合法，并返回一个布尔值。

methods: {
  checkPhone(rule, value, callback) {
    const phoneReg = /^1[3456789]\d{9}$/;
    if (!phoneReg.test(value)) {
      callback(new Error('手机号格式不正确'));
    } else {
      callback();
    }
  }
}

3. 当输入手机号时，输入框会自动调用checkPhone函数进行校验，如果手机号不合法，会返回一个错误信息，否则返回null。

完整代码如下：

<template>
  <div>
    <el-input v-model="phone" placeholder="请输入手机号" :validator="checkPhone"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
  methods: {
    checkPhone(rule, value, callback) {
      const phoneReg = /^1[3456789]\d{9}$/;
      if (!phoneReg.test(value)) {
        callback(new Error('手机号格式不正确'));
      } else {
        callback();
      }
    }
  }
}
</script>