如何用HTML的pattern属性限制文本输入仅允许字母（最多100字符）

嘿，你的思路是对的，用maxlength控制字符数已经搞定了一半，现在只需要调整pattern属性就能实现仅允许字母输入啦！

你当前的pattern="[a-z]{1,100}"有个小问题：它只匹配小写英文字母，用户输入大写字母的话就会触发验证错误。我们需要修改正则来支持大小写，同时明确排除数字和其他字符。

修正后的代码示例 #

<form action="http://www.severien.com/grit/formecho.php" method="post" target="_blank">
  <label for="videorequests"> Video Requests:</label>
  <input 
    type="text" 
    id="videorequests" 
    name="videorequests" 
    maxlength="100" 
    pattern="[a-zA-Z]{1,100}" 
    title="只能输入英文字母，最多100个字符"
  />
  <input type="submit" value="Submit" class="submitbutton" />
</form>

关键修改说明 #

• pattern="[a-zA-Z]{1,100}"：
  • [a-zA-Z]：匹配所有大小写英文字母，直接排除了数字、符号和空格。
  • {1,100}：限制长度在1到100之间（和maxlength呼应，双重保障）。
• title属性：这很重要！当用户输入不符合规则的内容并提交时，浏览器会弹出这个提示文本，帮用户明白哪里错了。

扩展场景（可选） #

如果你的需求允许输入带重音的字母（比如é、ñ、ü这类国际通用字母），可以使用Unicode字符类来兼容：

<input 
  type="text" 
  id="videorequests" 
  name="videorequests" 
  maxlength="100" 
  pattern="[\p{L}]{1,100}" 
  title="只能输入字母，最多100个字符"
/>

注意：\p{L}是Unicode字母类，需要浏览器支持（现代Chrome、Firefox都没问题），它能匹配几乎所有语言的字母字符。

额外提示 #

HTML的pattern验证是在表单提交时触发的，如果想要实时阻止用户输入非字母字符，可以搭配一小段JavaScript：

document.getElementById('videorequests').addEventListener('input', function(e) {
  this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

这段代码会在用户输入时自动移除非字母的字符，提升用户体验。

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