HTML表单输入字段多单词首字母大写正则表达式需求及问题

嘿，我来帮你搞定这个姓名输入字段的校验问题！你之前用的正则[A-zA-Z]{1,13}确实只能匹配连续的字母，没法处理空格分隔的第二个单词的首字母大写要求。咱们来调整一下正则，让它能正确校验“名+姓”这种格式，每个单词首字母都大写。

正确的正则表达式 #

这里给你一个符合需求的正则模式：

^[A-Z][a-zA-Z]{0,12}(?:\s[A-Z][a-zA-Z]{0,12})?$

正则拆解说明 #

• ^：匹配字符串的起始位置，确保从开头就符合规则
• [A-Z]：第一个单词的首字母必须是大写英文字母
• [a-zA-Z]{0,12}：首字母后面可以跟0到12个大小写字母（这样整个单词长度控制在1-13个字符，和你原来的长度限制一致）
• (?:\s[A-Z][a-zA-Z]{0,12})?：这是一个可选的非捕获组，用来匹配第二个单词：
  • \s：匹配一个空格，分隔两个单词
  • [A-Z]：第二个单词的首字母同样必须大写
  • [a-zA-Z]{0,12}：第二个单词的剩余字符规则和第一个一致
  • ?：表示这个组可以出现0次或1次，也就是允许用户只输入一个单词（比如只有名）或者两个单词（名+姓）
• $：匹配字符串的结束位置，避免输入多余的无效字符

修改后的表单代码 #

把你的表单代码更新成下面这样，同时给title属性加上友好的提示信息，方便用户知道输入规则：

<form action="/action_page.php">
  First and Second name
  <input 
    type="text" 
    name="f_and_s_name" 
    pattern="^[A-Z][a-zA-Z]{0,12}(?:\s[A-Z][a-zA-Z]{0,12})?$" 
    title="请输入1或2个单词，每个单词首字母大写，单个单词长度不超过13个字符"
  >
  <input type="submit">
</form>

额外扩展（可选） #

如果以后需要支持更多单词（比如中间名），只需要把正则里的?改成*，这样就能允许任意数量的符合规则的单词了：

^[A-Z][a-zA-Z]{0,12}(?:\s[A-Z][a-zA-Z]{0,12})*$

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