如何使用HTML5 input pattern属性仅验证拉丁语及扩展拉丁语字符

正确的正则表达式 #

要匹配所有拉丁语字符（包括ñ、é、ü这类扩展拉丁字符），推荐使用Unicode属性类\p{Latin}，它能覆盖所有拉丁脚本的字符，比手动枚举字符范围更全面。修改后的input代码如下：

<input type="text" pattern="[\p{Latin}]+" title="请仅输入拉丁语字符，包括ñ、é、ü等扩展字符">

如果需要兼容不支持Unicode属性类的旧浏览器（比如Safari 14及以下、IE），可以用覆盖大部分常用扩展拉丁字符的传统字符范围替代：

<input type="text" pattern="[A-Za-zÀ-ÿ]+" title="请仅输入拉丁语字符，包括ñ、é、ü等扩展字符">

注：À-ÿ范围包含了主流的扩展拉丁字符，但不如\p{Latin}覆盖全面，一些罕见的拉丁衍生字符可能无法匹配。

使用pattern属性的潜在陷阱与注意事项 #

• 浏览器兼容性限制：Unicode属性类\p{Latin}仅支持现代浏览器（Chrome、Firefox、Edge、Safari 15+），旧浏览器会直接忽略该规则，导致验证失效。如果需要兼容旧环境，优先用传统字符范围。
• 自动添加的锚点：HTML5的pattern属性会自动为正则添加^和$锚点，强制匹配整个输入字符串。不需要手动写这两个锚点，否则会出现冗余（虽然多数引擎会忽略，但没必要）。
• 空格与特殊字符需明确声明：默认正则仅匹配拉丁字符，如果需要允许空格、逗号、句号等，必须手动加到字符集里，比如[\p{Latin}\s,.]，否则用户输入这些字符会触发验证错误。
• 必须做服务器端二次验证：客户端验证只是优化用户体验的手段，完全可以被绕过（比如禁用JavaScript、修改DOM的pattern属性）。服务器端必须对提交内容做完全相同的验证，避免恶意输入。
• 标题提示要清晰：title属性的文案要准确说明允许的字符类型，别只写“输入无效”，否则用户不知道具体问题出在哪。
• 字符大小写无需额外处理：\p{Latin}和À-ÿ都同时匹配大小写字符，如果需要限制仅大写或仅小写，再单独调整正则。

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