vue 输入框验正则证手机号

以下是两种Vue中输入框验证手机号的方法：

方法一：使用自定义规则（validator）

data() {
  // 手机号校验方法
  const checkPhone = (rule, value, callback) => {
    const reg = /^1[345789]\d{9}$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号'));
    } else {
      callback();
    }
  };

  return {
    rules: {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator: checkPhone, trigger: 'blur' }
      ]
    }
  };
}

方法二：使用正则表达式规则（pattern）

data() {
  return {
    rules: {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[345789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
      ]
    }
  };
}