JavaScriptによる正規表現を使用したクレジットカード入力の入力

Question

私はこれをやっても成功することを試みてきました。私は、ラジオボタンで選択したクレジットカードの種類に基づいて、ユーザーが入力したクレジットカード番号を検証するために正規表現を使用しています。 しかし、の声明であれば、私はすべての警告を受けました。 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. 

Answer 1

あなたは以前に一度失敗したときにすべての単一のブロックを打つあなたのケースに4つの異なるifブロックを持っています。

if elseをifと置き換えて、1つのユースケースのみを検証します。 また、入力しようとしているカードの種類について具体的に知らせる必要もありません。有効な番号を入力するだけで十分です。

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>