如何通过regex的pattern属性阻止输入框输入任意语言重音字母？

你的需求很明确：只允许无重音的字母和空格输入，拒绝带重音的字符（比如ã、õ这类）。先说说你原来代码里的两个小问题，再给你完整的解决方案：

问题分析 #

1. 你原来的pattern="[A-Za-z]+"不包含空格，所以像「Joao Silva」这种带空格的合法输入也会被拦截，这不符合你的预期；
2. pattern属性本身是表单提交时才触发验证，它不会实时阻止用户输入带重音的字母，只是提交时弹出错误提示。如果想要实时拦截，还需要配合JavaScript。

解决方案 #

1. 修正pattern属性（提交时验证） #

先调整pattern，允许字母和空格，同时完善验证提示的逻辑：

<form>
  <label for="username">Name <i>(only letters without accent)</i></label>
  <br>
  <input 
    name="username" 
    id="username" 
    type="text" 
    required
    pattern="^[A-Za-z\s]+$" 
    title="Only letters without accent and spaces are allowed"
    oninvalid="this.setCustomValidity('Only letters without accent and spaces are allowed')"
    oninput="this.setCustomValidity('')"
  >
  <button type="submit">Submit</button>
</form>

这里的关键调整：

• pattern="^[A-Za-z\s]+$"：^和$确保整个输入内容都符合规则，\s允许空格；
• 加上required属性，避免空提交；
• oninput="this.setCustomValidity('')"：用户修正输入后自动清除错误提示，否则错误会一直显示。

2. 实时拦截带重音字母（JavaScript补充） #

如果想要用户输入或粘贴时直接阻止非法字符，添加这段JavaScript：

const usernameInput = document.getElementById('username');

usernameInput.addEventListener('input', function() {
  // 匹配所有非基础字母、非空格的字符（包括带重音的字母）
  this.value = this.value.replace(/[^A-Za-z\s]/g, '');
});

这段代码会监听输入框的所有输入行为（包括键盘输入、粘贴），自动移除所有带重音的字母和其他非法字符。如果需要给用户提示，可以在替换后加个轻量提示：

usernameInput.addEventListener('input', function() {
  const originalValue = this.value;
  this.value = this.value.replace(/[^A-Za-z\s]/g, '');
  if (originalValue !== this.value) {
    alert('Only letters without accent and spaces are allowed');
  }
});

这样组合下来，既通过pattern保证了表单提交时的验证规范，又通过JavaScript实现了实时拦截，完全满足你的需求。

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