Safari及现代浏览器正则输入验证：Unicode类别模式失效问题

你的观察很准确——[\p{L}]{1,100}这种Unicode属性类正则在Chrome 66中能正常验证字母输入，但在Safari 11.1里失效，核心原因是早期Safari版本的HTML原生表单验证引擎不支持Unicode属性类（如\p{L}）。

为什么会有差异？ #

Chrome在较早版本就跟进了ECMAScript标准对Unicode属性类的支持，并且将其整合到了HTML的pattern属性验证逻辑中。但Safari 11.1及更早版本的原生表单验证正则引擎并没有实现这一特性，它无法识别\p{L}这类表示“任意Unicode字母”的语法，自然会把符合要求的输入判定为无效。

解决办法 #

你有两种可行的方案来处理这个兼容问题：

1. 使用兼容的字符范围（有限覆盖）

如果你只需要覆盖常用的字母（包括带重音的拉丁字母），可以用传统的字符范围替代\p{L}，比如：

<input type="text" pattern="[A-Za-zÀ-ÿ]{1,100}" name="bar" value="">

这种方式不需要额外JS，能直接在Safari 11.1中生效，但缺点是无法覆盖所有Unicode字母（比如中文、日文、希腊文等）。

2. 用JavaScript自定义验证（完整Unicode支持）

如果需要支持所有Unicode字母，最好的方式是绕过HTML原生pattern的限制，用JavaScript实现自定义验证——现代浏览器（包括Safari 11.1+）的JS引擎已经支持带u修饰符的Unicode属性类正则。

示例代码：

<!DOCTYPE html>
<html lang="en">
<body>
<form id="unicodeForm">
  <input type="text" name="bar" value="" placeholder="输入任意字母">
  <input type="submit">
</form>

<script>
const form = document.getElementById('unicodeForm');
const inputField = form.querySelector('input[name="bar"]');

form.addEventListener('submit', function(e) {
  // 注意添加u修饰符启用Unicode模式
  const unicodeLetterRegex = /^[\p{L}]{1,100}$/u;
  
  if (!unicodeLetterRegex.test(inputField.value)) {
    e.preventDefault();
    // 使用原生表单验证提示
    inputField.setCustomValidity('请输入1-100个有效的字母（支持所有Unicode语言）');
    // 触发原生提示框
    inputField.reportValidity();
  } else {
    // 清除错误提示
    inputField.setCustomValidity('');
  }
});
</script>
</body>
</html>

这种方式不仅能在Safari 11.1中正常工作，还能完整支持所有Unicode字母，同时保留原生表单验证的交互体验。

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