FormControl正则表达式报错：Pattern属性值无效问题排查

错误根源 #

你的正则表达式报错核心原因是字符类中的-未正确处理：
在字符类[a-z0-9!#$%&'*+/=?^_{|}_{-]`中，`-`位于`}之后，会被正则引擎解析为「从_{`到`-`的字符范围」。但`}的ASCII码（126）远大于-`的ASCII码（45），这种反向范围是无效的，直接触发语法错误。

注：字符类中的^不在开头时属于普通字符，无需转义，不是报错诱因。

修复方案 #

只需调整-在字符类中的位置，或对其转义即可解决问题：

方案1：将-移到字符类结尾

修改后的pattern属性值：

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

（把每个字符类中的-移到末尾，避免被解析为范围符号）

方案2：转义字符类中的-

如果不想调整位置，给-加反斜杠转义：

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

额外提示 #

你已经将输入框类型设为type="email"，浏览器本身会提供基础的邮箱格式校验。如果不需要自定义更严格的规则，可以直接移除pattern属性，简化代码逻辑。

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