javascript - Firefox 和 Chrome 中不可靠的 javascript 正则表达式测试

Question

我在 Firefox 3.6 和 Chrome 6 dev 上遇到了一个奇怪的 javascript 正则表达式问题。我正在开发一个大型表单输入网站，该网站使用 jQuery 进行一些基本的 javascript 验证。

$(document).ready(function() {
  $("tr[id^='" + BaseRowId + "rid']").each(function(){obj.WireRowEvents(this);});
}
var obj = {
  "WireRowEvents": function(row) {
    $("input[id$='Orgn']").blur(function() { obj.ValidateOrgn(this); }).blur();
    $("input[id$='Prog']").blur(function() { obj.ValidateProg(this); }).blur();
  },
  "ValidateOrgn": function(orgnId) { // ValiadateProg is the same as this
    var orgn = $(orgnId);            // function except it checks for a
    if (orgn.length == 0)            // length of 4 instead of 5.
      return;
    var orgnValue = orgn.val();
    if (orgnValue.length != 5) {
      if (orgnValue.length > 0) {
        orgn.addClass("invalid");
      } else {
        orgn.removeClass("invalid");
      }
    } else {
      if (/\d{5}/g.test(orgnValue)) { // This is the problem area
        orgn.removeClass("invalid");  // The above line is '/\d{4}/g' for prog.
      } else {
        orgn.addClass("invalid");
      }
    }
  }
}

使用上面的 javascript(只简化了 ready 和 WireRowEvents 函数，但是 ValidateOrgn 方法是完整的。正如你所看到的Orgn 有效的唯一要求是长度为 5 个数字，Prog 长度为 4 个数字。在 Internet Explorer 7 和 8 以及 Safari 4.0.4 中，上述代码可以正常工作。

在 Firefox 和 Chrome 中，在页面加载时，Orgn 和 Prog 被标记为无效但仅在右侧。整行有两个 Orgn 和两个 Prog 输入(具有不同的 ID 但以 Orgn 和 Prog 结尾)。左侧显示正常，但右侧“无效”。

_{(来源:gibixonline.com)}

最好的部分是，您可以在文本框中单击并单击退出，有时(不是 100%)它会正确验证。

_{(来源:gibixonline.com)}

当单步执行 Firebug 中的 ValidateOrgn 和 ValidateProg 函数时，行 if (/\d{5}/g.test(orgnValue)) 返回 false，导致它添加 css 类 invalid。如果此时我复制相同的行并将其粘贴到控制台 true 将按预期返回。同样，点击进入和点击退出将导致它在有效和无效状态之间来回翻转。

在 Internet Explorer 和 Safari 中，它按预期工作，我无法在那里重现该问题。

_{(来源:gibixonline.com)}

更新

确实是全局标志问题。多亏了 Pointy 的评论，我也设法简化了函数调用(它被混杂在一起，并且无论如何都被标记为要清理)。现在的新方法是:

"ValidateOrgn": function (orgnId) {
  var orgn = $(orgnId);
  if (orgn.length == 0)
  return;

  // I don't want to mark it invalid if it's blank.
  if (orgn.val().length > 0) {
    if (/^\d{5}$/.test(orgn.val())) {
      orgn.removeClass("invalid");
    } else {
      orgn.addClass("invalid");
    }
  } else {
    orgn.removeClass("invalid");
  }
}

Answer 1

也许尝试将您的正则表达式放在一个单独的变量中，如下所示:

  //...
  var re = /^\d{5}$/; // using Pointy's comment, which I think is well-advised

  if (re.test(orgnValue)) { // This is the problem area
    orgn.removeClass("invalid");  // The above line is '/\d{4}/g' for prog.
  } else {
    orgn.addClass("invalid");
  }
  //...