如何在Vuetify的v-text-field中限制特殊字符，仅允许字母、数字和空格

你可以通过两种方式实现需求：一种是添加表单验证规则（输入后提示错误），另一种是实时拦截特殊字符输入（禁止输入不符合要求的内容）。

方法一：添加表单验证规则 #

在现有的userNameRule中增加正则验证规则，当用户输入特殊字符时，会显示错误提示：

<v-text-field required
  label='Name' 
  class="required"
  v-model='company_name'
  :rules="userNameRule">
</v-text-field>

// 脚本部分
userNameRule: [
  value => !!value || 'Please enter company name',
  // 新增规则：仅允许字母、数字和空格
  value => /^[A-Za-z0-9\s]+$/.test(value) || 'Only letters, numbers and spaces are allowed'
]

正则说明：^[A-Za-z0-9\s]+$ 匹配以字母、数字或空格开头和结尾的内容，+ 确保输入至少有一个有效字符。

方法二：实时拦截特殊字符输入 #

通过@input事件监听输入，实时过滤掉不符合要求的字符，同时保留验证规则做兜底：

<v-text-field required
  label='Name' 
  class="required"
  v-model='company_name'
  :rules="userNameRule"
  @input="filterSpecialChars">
</v-text-field>

// 脚本部分
userNameRule: [
  value => !!value || 'Please enter company name',
  value => /^[A-Za-z0-9\s]*$/.test(value) || 'Only letters, numbers and spaces are allowed'
],
methods: {
  filterSpecialChars() {
    // 替换所有非字母、数字、空格的字符为空
    this.company_name = this.company_name.replace(/[^A-Za-z0-9\s]/g, '')
  }
}

这种方式下，用户输入特殊字符会直接被清除，不会出现在输入框中，体验更流畅。

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