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结尾).左侧显示为应该显示,但右侧显示为"无效".

http://www.gibixonline.com/media/so/jquery-regex-initial.png

最好的部分是,您可以单击文本框并单击退出,有时(不是100%)它将正确验证.

http://www.gibixonline.com/media/so/jquery-regex-clicking.png

当单步执行Firebug中的ValidateOrgn和ValidateProg函数时,该行if (/\d{5}/g.test(orgnValue))返回false,这会导致它添加css类invalid.如果,那时,我复制相同的确切行并将其粘贴到控制台true中按预期返回.再次,单击并单击将使其在有效和无效状态之间来回切换.

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

http://www.gibixonline.com/media/so/jquery-regex-correct.png

更新

这确实是全球旗帜问题.感谢Pointy的评论,我也设法简化了函数调用(它被一起hodpodged并标记为无论如何都要清理).新方法现在是:

"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");
  }
  //...