在javascript中使用正则表达式进行信用卡输入验证

Question

我一直在努力完成这项工作，但没有成功。我正在使用正则表达式根据通过单选按钮选择的信用卡类型来验证用户输入的信用卡号。但是我一直在为 all if 语句发出警报。看起来所有的 if else 语句都经过了测试。

 There is the HTML code fragment:

<code>
<p><b>Payment Information:</b></p>
         <fieldset>
            <input type="radio" name="payment" value="Visa" id="visa" />Visa &nbsp;
            <input type="radio" name="payment" value="Master Card" />Master Card &nbsp;
            <input type="radio" name="payment" value="American Express" />American Express &nbsp;
            <input type="radio" name="payment" value="Discover" />Discover <br /><br />
            <label>Card Number:</label>
            <input type="text" name="cardNumber" id="cardNum" size="30" value="" onblur="ValidateCreditCardNumber()" />
</code>

And there is my javascript function :

<code>

function ValidateCreditCardNumber(){

    var ccNum = document.getElementById("cardNum").value;

    var visaRegEx = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
    var mastercardRegEx = /^(?:5[1-5][0-9]{14})$/;
    var amexpRegEx = /^(?:3[47][0-9]{13})$/;
    var discovRegEx = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;

    if (visaRegEx.test(ccNum) === false ){ // Visa validation
       alert("Please provide a valid Visa number!");
        }
      else
        {
         alert("Thank You!");
        }

    if (mastercardRegEx.test(ccNum) === false){ // MasterCard validation
        alert("Please provide a valid MasterCard number!");
        }
      else
        {
        alert("Thank You!");
        }

    if(amexpRegEx.test(ccNum) === false){ // Amex  validation
        alert("Not a valid America Express number!");
        }
      else
        {
        alert("Thank You!");
        }

    if (discovRegEx.test(ccNum) === false){ // Discover validation
        alert("Please provide a valid Discover number!");
        }
      else
        {
        alert("Thank You!");
        }

    }
</code>

Any kind of help or advice would be really appreciated.

原文由 Cyrille 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的案例中，您有 4 个不同的 if 块，当前一个块失败时，它会击中每个块。

将 if 替换为 if else ，这样只会验证单个用例。此外，您无需让用户知道他试图输入的卡的具体类型。只需一条消息来输入有效号码就足够了。

 function ValidateCreditCardNumber() {

  var ccNum = document.getElementById("cardNum").value;
  var visaRegEx = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
  var mastercardRegEx = /^(?:5[1-5][0-9]{14})$/;
  var amexpRegEx = /^(?:3[47][0-9]{13})$/;
  var discovRegEx = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;
  var isValid = false;

  if (visaRegEx.test(ccNum)) {
    isValid = true;
  } else if(mastercardRegEx.test(ccNum)) {
    isValid = true;
  } else if(amexpRegEx.test(ccNum)) {
    isValid = true;
  } else if(discovRegEx.test(ccNum)) {
    isValid = true;
  }

  if(isValid) {
     alert("Thank You!");
  } else {
     alert("Please provide a valid Visa number!");
  }
}

原文由 Sushanth – 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将您的逻辑更改为：

 <script type="text/javascript">

// Store the regexes as globals so they're cached and not re-parsed on every call:
var visaPattern = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
var mastPattern = /^(?:5[1-5][0-9]{14})$/;
var amexPattern = /^(?:3[47][0-9]{13})$/;
var discPattern = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;

function validateCreditCardNumber() {

    var ccNum  = document.getElementById("cardNum").value;

    var isVisa = visaPattern.test( ccNum ) === true;
    var isMast = mastPattern.test( ccNum ) === true;
    var isAmex = amexPattern.test( ccNum ) === true;
    var isDisc = discPattern.test( ccNum ) === true;

    if( isVisa || isMast || isAmex || isDisc ) {
        // at least one regex matches, so the card number is valid.

        if( isVisa ) {
            // Visa-specific logic goes here
        }
        else if( isMast ) {
             // Mastercard-specific logic goes here
        }
        else if( isAmex ) {
            // AMEX-specific logic goes here
        }
        else if( isDisc ) {
            // Discover-specific logic goes here
        }
    }
    else {
        alert("Please enter a valid card number.");
    }
}

</script>

原文由 Dai 发布，翻译遵循 CC BY-SA 3.0 许可协议