邮箱验证正则表达式控制台报错：字符类存在无效字符求修复方案

问题根源 #

报错的核心是正则字符类中的-被错误识别为范围运算符，现代浏览器的表单验证正则引擎（尤其是启用v模式的逻辑）对这种写法的判定更为严格，因此抛出无效字符类的错误。

修复方案 #

调整字符类中-的位置，将其移至字符类的开头或结尾，明确标记它是普通字符而非范围运算符。同时确保点号的转义符合JS字符串规则（用\\.表示正则中的.）。

修改后的代码示例：

inputProps={{
  pattern: '[a-zA-Z0-9._%+_-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$'
}}

也可以将-放在字符类开头：

inputProps={{
  pattern: '[-a-zA-Z0-9._%+]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$'
}}

补充说明 #

• 在正则字符类[]中，-只有处于开头、结尾，或者被转义（\-）时，才会被当作普通连字符处理。原写法里%+-中的-会被尝试解析为%到+的字符范围，虽然ASCII范围合法，但不符合现代正则引擎的严格规范。
• 上述修改已能解决当前语法报错，若需要兼容更复杂的邮箱格式（如带特殊字符的国际化邮箱），可在此基础上扩展正则规则。

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