HTML表单email字段pattern校验失效，始终提示输入无效

核心问题根因 #

HTML原生表单的pattern属性，和JavaScript环境的正则语法存在适用边界差异，直接把JS里的正则写法照搬进HTML属性就会触发校验失效：

• JavaScript中写正则字面量时，两端的/是正则的定界标识，末尾的i、g等字符是正则修饰符，属于JS引擎识别正则对象的语法组成部分，不是正则规则本身的内容
• HTML的pattern属性仅接收纯正则字符串，默认会对输入值做全字符串精确匹配，既不支持识别JS风格的定界斜杠，也不会把斜杠后的字符当成修饰符解析

当前代码里写的pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i"，等于要求浏览器判断输入内容必须「以斜杠开头、以斜杠加小写i结尾」，和正常邮箱格式完全不匹配，所以无论输入什么合法邮箱，都会被判定为校验不通过。
这也是为什么在浏览器控制台用JS测试同一段正则时能正常得到匹配结果——JS环境会正确识别定界符和修饰符，但HTML属性的解析逻辑完全不同。

最简修正方案 #

移除pattern属性值两端的JS正则定界斜杠、以及末尾带修饰符的斜杠，只保留核心的正则匹配规则即可：

• 错误写法：

<input type="email" class="form-control" id="email" pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i" required>

• 修正后写法：

<input type="email" class="form-control" id="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" required>

修正后，搭配已有的validateFormFields函数调用checkValidity()的逻辑，就能正常触发校验流程，合法邮箱格式不会再触发无效提示，不符合规则的输入则会正常展示对应的invalid-feedback提示。

注意事项 #

• pattern属性本身默认等价于给正则规则加上了首尾锚定（即自动匹配全字符串从开头到结尾的内容），不需要手动在正则前后加^和$
• 如果需要正则支持忽略大小写匹配，可以直接在规则的字符范围里兼容大小写（比如a-zA-Z），不需要把JS风格的i修饰符写进属性值

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