HTML中如何为输入框设置仅允许输入0-9及+的字符限制？

pattern 属性仅在表单提交时触发校验，不会实时拦截用户输入的非法字符，这是你之前配置不生效的核心原因。针对你的Vue组件场景，可以通过以下两种方式实现输入限制：

方案1：监听input事件实时过滤（推荐） #

给base-input组件绑定input事件，输入时直接过滤非法字符：

<base-input
    style="margin-bottom: 15px; width: 100%; max-width: 510px;"
    v-model="phone"
    type="tel"
    placeholder="Mobile phone"
    @input="handlePhoneInput"
/>

对应的处理逻辑：

// Vue2 写法
methods: {
  handlePhoneInput(value) {
    // 正则移除所有非数字、非+的字符
    this.phone = value.replace(/[^0-9+]/g, '')
  }
}

// Vue3 写法
const handlePhoneInput = (value) => {
  phone.value = value.replace(/[^0-9+]/g, '')
}

如果需要额外限制+只能出现在号码首位，可以把正则替换为/[^0-9+]|(?!^)\+/g，自动清除中间输入的+字符。

方案2：通过watch监听绑定值 #

不需要修改组件模板，直接监听绑定的phone变量自动过滤：

// Vue2 写法
watch: {
  phone(newVal) {
    this.phone = newVal.replace(/[^0-9+]/g, '')
  }
}

// Vue3 写法
watch(phone, (newVal) => {
  phone.value = newVal.replace(/[^0-9+]/g, '')
})

内容的提问来源于stack exchange，提问作者dokichan