国际字符的 JavaScript 验证问题

Question

我们在 Stack Overflow 上使用出色的 validator plugin for jQuery 在将输入提交到服务器之前对其进行客户端验证。

它通常运作良好，但是，这让我们摸不着头脑。

以下验证器方法用于用户名字段的询问/回答表单（请注意，您必须退出才能在实时站点上看到此字段；它位于每个 /question页面和/ask 页面）

$.validator.addMethod("validUserName",
  function(value, element) {
  return this.optional(element) || 
  /^[\w\-\s\dÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð]+$/.test(value); },
  "Can only contain A-Z, 0-9, spaces, and hyphens.");  

现在这个正则表达式看起来很奇怪，但其实很简单：

• 匹配字符串的开头 (^)
• 匹配其中任何一个..
  • 单词字符 (\w)
  • 破折号 (-)
  • 空格（\s）
  • 数字 (\d)
  • 疯狂的月亮语言字符（àèìòù等）
• 现在匹配字符串的结尾 ($)

是的，我们遇到了Internationalized Regular Expressions 问题。 JavaScript 对“单词字符”的定义根本不包括国际字符。

这是奇怪的部分：即使我们已经麻烦手动将大量有效的国际字符添加到正则表达式，它不起作用。你不能在用户名的输入框中输入这些国际字符而不得到..

只能包含 A-Z、0-9、空格和连字符

.. 验证返回！

显然验证适用于正则表达式的其他部分.. 那么.. 什么给出了？

另一个奇怪的部分是，此验证在浏览器的 JavaScript 控制台中有效，但在作为我们的标准 *.js 包含的一部分执行时无效。

/^[\w-\sÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð]+$/ .test('ÓBill de hÓra') === true

我们之前在 JavaScript 代码中遇到过一些非常奇怪的国际字符问题，导致了一些非常非常讨厌的黑客攻击。我们想了解这里发生了什么以及为什么。请赐教！

Answer 1

我认为电子邮件和 url 验证方法在这里是一个很好的参考，例如。邮件方式：

email: function(value, element) {
    return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
},

The script to compile that regex.

换句话说，用这个替换你的“疯狂月亮”字符的任意列表可能会有所帮助：

[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]

基本上，这通过用更通用的定义替换需要编码的字符来避免您在其他地方遇到的字符编码问题。虽然不一定更具可读性，但到目前为止它比您的完整列表要短。

Answer 2

这不是一个真正的答案，但我还没有 50 个代表来添加评论...这绝对可以归因于编码问题。

是的，“ECMA 不应该关心编码......”等等等等，如果您使用的是 firefox，请转到 View > Character Encoding > Western (ISO-8859-1) 然后尝试使用名称字段。

手动更改编码后对我来说效果很好（假设页面的其余部分不喜欢编码开关，:P）

（在 IE8 上你可以去 Page > Encoding > Western European (Windows) 得到同样的效果）

Answer 3

JS文件的字符编码是什么？

对于 XML QName，我使用这个 RegExp：

/**
 * Definition of an XML Name
 */
var NameStartChar = "A-Za-z:_\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D"+
                    "\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF"+
                    "\uF900-\uFDCF\uFDF0-\uFFFD\u010000-\u0EFFFF";
var NameChar = NameStartChar+"\\-\\.0-9\u00B7\u0300-\u036F\u203F-\u2040";
var Name = "^["+NameStartChar+"]["+NameChar+"]*$";
RegExp (Name).test (value);

它也适用于国际化字符。注意转义。因此，我只能将 JS 文件限制为 ASCII 字符。因此，在处理 ISO-8859 与 UTF-8 字符集时我不会遇到麻烦。

如果您使用 ASCII 不是真正子集的字符编码（例如，在亚洲 UTF-16 中），这将不再正确。

干杯，

Answer 4

这里的比赛迟到了，但我只是使用了这个表达方式，它似乎对我很有效。似乎比较全面，也比较简单：

var re = /^[A-zÀ-Ÿ\s\d-]*$/g; 
var str1 = 'casa-me,pois 99 estou farto! Eis a lista:uma;duas;três';
var str2 = 'casa-me pois 99 estou farto Eis a lista uma duas três';
var str3 = 'àèìòùÀÈÌÒÙáéíóúýÁÉÍÓÚÝâêîôûÂÊÎÔÛãñõÃÑÕäëïöüÿÄËÏÖÜŸçÇßØøÅåÆæœ'

alert(re.test(str1));
alert(re.test(str2));
alert(re.test(str3));

Answer 5

列出的国际字符是扩展 ASCII 的一部分。你加的肯定不是。

Answer 6

鉴于该语句在控制台中有效，这是否必须按照您的 .js 文件的保存方式（即 ascii 或 UTF-8）以及浏览器正在加载它们并在此过程中翻译字符？

Answer 7

使用 Fiddler 或 Charles 之类的工具（不是 Firebug 的 Net 面板，或浏览器中实际存在的任何其他东西）来检查实际通过网络传输的内容。几乎可以肯定是编码问题：文件已保存在某些 Microsoft 字符集中并以 UTF-8 格式发送，或者可能是相反的情况。

在 JS RegExps 的情况下，正如 Boldewyn 指出的那样，您可以通过为您想要的 US-ASCII 范围之外的字符指定 Unicode 代码点来避免这些问题。不过，最好确保您没有混淆文件保存位置和提供文件位置之间的编码。