javascript - jQuery/Javascript - 多重正则表达式验证

Question

您将如何在 jQuery 或 JS 中验证 2 个不同的正则表达式？

我的 JS 代码:

function validate(){
    var MyField = document.getElementById('MyField');
    if (MyField.value == null || !MyField.value.toString().match(/^(\d{3})-?\d{2}-?\d{4}$/) || !MyField.value.toString().match(/^(\d{2})-?\d{7}$/));
    alert('Ivalid Entry ...'); 
    return false;
}

我的 HTML:

<form action="">
  <input id="MyFIeld" name="MyField" type="text" />
  <input type="submit" value="Submit" onClick="validate();" />
</form>

基本上是为了正确设置税号和 SSN 格式。 ＃＃-＃＃＃＃＃＃＃ 或者 ＃＃＃-＃＃-＃＃＃＃ ... 我对 JS 或 jQuery 解决方案持开放态度……非常感谢所有帮助。

Answer 1

在这种情况下我通常做的是拥有一个正则表达式测试“库”:

var regexTest = function() {
   this.TaxId = /^(\d{2})-?\d{7}$/;
   this.SSN = /^(\d{3})-?\d{2}-?\d{4}$/;
}

这会分隔您的正则表达式，以防因某种原因需要更改它。相信我，这种事时不时就会发生。 (也许不是 SSN/TaxId，但这是一个很好的做法)

然后我设置一个类似于您所拥有的事件 block (jQuery 使这很容易)以提供即时反馈:

$("#MyField").bind("blur keyup",
   function() {
      var myVal = $(this).val(); // should store $(this) in a var instead
      if(regexTest.SSN.test(myVal) || regexTest.TaxId.test(myVal)) {
         $(this).css("background-color", "");
      } else {
         $(this).css("background-color", "#FF0000");
      }
   }
);

我知道这不会在提交时验证，但它会在用户键入时向他们提供反馈。 (只要您保持验证简单，开销也不是很糟糕。)然后对数据服务器端执行验证(人们可以绕过验证检查)，您应该会很好。是的，它不会在提交之前验证数据，但如果用户看到红色框，他们就知道这是错误的数据。

当然，正如一些评论中所述，有验证库，但有时我喜欢编写自己的验证库。 ;)