HTML表单Display Name字段正则报错，求正确Pattern

算力阿峰

2026-6-16

解决HTML Display Name字段的Pattern正则问题

正确的正则表达式

^[A-Z][a-z0-9@()[\]{}._!#$%&'*+/=?\^`|~-]*(?: (?:[A-Z][a-z0-9@()[\]{}._!#$%&'*+/=?\^`|~-]*|[0-9@()[\]{}._!#$%&'*+/=?\^`|~-]+))*$

错误原因分析

字符类中的^未转义：正则字符类里的^是元字符，表示取反，若要将其作为允许的特殊字符，必须转义为\^
-的位置错误：-在字符类中间会被解析为范围符（比如a-z），将其移到字符类末尾可避免转义，也确保它被识别为普通字符
不必要的转义：HTML的pattern属性不需要正则分隔符/，因此原正则中的\/应直接写为/

修正后的完整代码

HTML部分

<form id="registration-form">
  <!-- Display Name Field -->
  <label for="display-name">Display Name:</label>
  <input type="text" id="display-name" name="display_name" 
         pattern="^[A-Z][a-z0-9@()[\]{}._!#$%&'*+/=?\^`|~-]*(?: (?:[A-Z][a-z0-9@()[\]{}._!#$%&'*+/=?\^`|~-]*|[0-9@()[\]{}._!#$%&'*+/=?\^`|~-]+))*$" 
         title="Display name must start with an uppercase letter, contain no consecutive spaces, and each space-separated segment must start with either an uppercase letter, number, or special character. Length must be between 2 and 50 characters."
         minlength="2" maxlength="50" required>
  <br><br>

  <button type="submit">Submit</button>
</form>

JS部分

const registrationForm = document.querySelector('#registration-form');

registrationForm.onsubmit = e => {
  e.preventDefault();  // 测试模式
  console.clear();
  console.log(':) name accepted ', registrationForm.display_name.value);
};