校验思路

• 监听输入框，过滤字符串
• 长度控制11位
• 通过正则表达式验证手机号格式

示例代码

<el-input size="medium" v-model="orderForm.telephone" placeholder="请填写收件人手机号码" clearable maxlength="11"></el-input>

<script>
export default {
  data() {
    /**
     * 校验手机号
     */
    const validatePhone = (rule, value, callback) => {
      const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      orderForm: {
        telephone: '',
      },
      formRules: {
        telephone: [{
          required: true,
          message: '请填写收件人手机号码',
          trigger: 'blur',
        }, {
          validator: validatePhone,
          trigger: 'change',
        }],
      },
    }
  },
  watch: {
    'orderForm.telephone': {
      handler(newVal) {
        if (!newVal) {
          this.orderForm.telephone = ''
          return false
        }
        // 实时把非数字的输入过滤掉
        this.orderForm.telephone = newVal.match(/\d/gi) ? newVal.match(/\d/gi).join('') : ''
      },
      deep: true,
    },
  },
}
</script>