在javascript中使用正則表達式進行信用卡輸入驗證

Question

我一直試圖完成這項工作，但沒有成功。我使用正則表達式來驗證用戶根據通過單選按鈕選擇的信用卡類型輸入的信用卡號碼。 但如果陳述我堅持有全部的警報。它看起來像所有如果其他語句進行測試。

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. 

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

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>