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

Question

我一直试图完成这项工作,但没有成功.我使用正则表达式来验证用户根据通过单选按钮选择的信用卡类型输入的信用卡号.但我记得对所有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.

Answer 1

if在您的情况下,您有4个不同的块,当前一次失败时,它会击中每个块.

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