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

【问题标题】：credit card input validation using regular expression in javascript在javascript中使用正则表达式验证信用卡输入
【发布时间】：2016-11-23 23:12:54
【问题描述】：

我一直在努力完成这项工作，但没有成功。我正在使用正则表达式根据通过单选按钮选择的信用卡类型验证用户输入的信用卡号。但我一直在提醒所有 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.

【问题讨论】：

没有验证信用卡号码的数学规则吗？见en.wikipedia.org/wiki/Luhn_algorithm
@Phil 我相信有，但有人告诉我改用正则表达式。
“告诉”是谁？告诉他们有更好的方法
正则表达式只会验证输入值的格式 - 例如，正则表达式无法计算 CC 编号的校验位，这也应该这样做。但是我注意到这些正则表达式会阻止用户使用空格或连字符输入他们的 CC 号码（这提高了可读性和可用性）。我认为您应该进行最小长度检查，并让您的后端支付处理器对数字进行实际验证。

标签： javascript regex

【解决方案1】：

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

将 if 替换为 if else，这样 if 只会验证单个用例。此外，您无需让用户知道他正在尝试输入的卡类型。只需一条消息即可输入有效号码。

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

【讨论】：

既然我们在这里优化，为什么不评估 isValid 像这样： var isValid = visaRegEx.test(ccNum)) || mastercardRegEx.test(ccNum)) || amexpRegEx.test(ccNum)) || discovRegEx.test(ccNum));
这是一个更准确的发现卡正则表达式：stackoverflow.com/a/13500918/2718874

【解决方案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

【解决方案3】：

这应该可以完成工作

var cc = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11}|62[0-9]{14})$/

cc.test(card_number)

来源：vee-validate repo

【讨论】：