Kreditkarteneingabe Validierung mit regulären Ausdruck in Javascript

Question

Ich habe versucht, dies zu tun, aber keinen Erfolg. Ich verwende reguläre Ausdrücke, um die vom Benutzer eingegebene Kreditkartennummer anhand des Typs der Kreditkarte zu bestätigen, die über den Radioknopf ausgewählt wurde. Aber ich keed mit der Warnung für die alle wenn Aussage. Es sieht aus wie alle wenn sonst Anweisungen getestet werden.

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

Sie haben 4 verschiedene if Blöcke in Ihrem Fall, die jeden einzelnen Block trifft, wenn der vorherige einmal versagen.

Ersetzen if mit if else, so, wenn nur für einen einzigen Anwendungsfall validiert werden. Sie müssen den Benutzer auch nicht über den Kartentyp informieren, den er eingeben möchte. Nur eine einzige Nachricht zur Eingabe einer gültigen Nummer sollte ausreichen.

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

Ändern Sie Ihre Logik dazu:

<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>