如何设置input标签仅允许输入字母和数字？

嘿，我知道这个问题卡了你一会儿——你用的pattern属性其实是用来做表单提交验证的，不是实时拦截输入的！所以就算加了它，用户还是能输入那些标点符号，只是提交的时候会触发验证提示而已，没法从根源上阻止输入。

下面给你几个靠谱的解决方案，按推荐程度排序：

通过Vue的@input事件监听用户输入，实时把非字母数字的字符过滤掉，这样用户输入无效字符会被立刻清除，体验直接拉满：

<!-- 在input标签上绑定input事件 -->
<input maxlength="12" v-model="profile.name" @input="filterOnlyAlphaNumeric">

然后在你的Vue组件的methods里添加处理方法：

methods: {
  filterOnlyAlphaNumeric() {
    // 用正则替换掉所有非字母数字的字符
    this.profile.name = this.profile.name.replace(/[^a-zA-Z0-9]/g, '')
  }
}

如果你还需要表单提交时的验证提示，可以保留pattern，但要修正正则表达式（加上+表示至少一个有效字符，否则空值会通过验证），再配合表单的默认验证：

<form @submit.prevent="handleSubmit">
  <input 
    maxlength="12" 
    v-model="profile.name" 
    pattern="[a-zA-Z0-9]+"
    title="只能输入字母和数字哦"
    required
  >
  <button type="submit">提交</button>
</form>

不过这个方法只能在提交时提示，没法阻止用户输入无效字符，适合和方案1搭配使用。

可以给input加上inputmode="alphanumeric"，让移动端弹出字母数字混合键盘，减少用户输入无效字符的概率：

<input maxlength="12" v-model="profile.name" inputmode="alphanumeric" @input="filterOnlyAlphaNumeric">

同样，这个只是优化体验，还是需要配合方案1的过滤逻辑才能彻底解决问题。

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