자바 스크립트 신용 카드 번호 및 유효 기간 확인

Question

문제는 이미 (그냥 복사/붙여 넣기 stackoverflow에서 일부 코드) 그것을 알아 낸 것입니다. 그러나 저에게 중요한 것은 단지입니다. CC 번호를 입력하고 "Tab"을 누를 때마다 자동으로 만료 유효성이 검사됩니다. 나는 2 박스에 onchange 속성을 사용했다. 제 코드를 조정하도록 도와주세요. 내가 결과에 대해 원하는 것이 무엇

입니다 ..

내가 CC 번호 입력하고 "탭"CC 텍스트 상자 [그 유효성을 검사] 아직 아직 만료 텍스트 상자를 [검증 할 수 없습니다에 대한 onchange를 속성 공격 - 언제 검증].

나는 모든 것을 시도했지만 작동하지 않습니다. ..hehe. Im 죄송합니다. 저는 정말로 자바 스크립트를 작성하지 않았습니다. 고맙습니다.

자바 스크립트

<!-- START: VALIDATION IN CREDIT CARDS --> 
<script type="text/javascript"> 


//START: FOR CREDIT CARD NUMBER 

    function validateCard(card_no){ 

     var Check_MasterCard = /^([51|52|53|54|55]{2})([0-9]{14})$/; 
     var Check_Visa = /^([4]{1})([0-9]{12,15})$/; 

     if(Check_Visa.test(card_no)){ 
      document.getElementById('cardSuccess').style.display = "block"; 
      document.getElementById('cardSuccess_1').style.display = "none"; 
      document.getElementById('cardError').style.display = "none"; 
      return true; 
     }else if(Check_MasterCard.test(card_no)){ 
      document.getElementById('cardSuccess_1').style.display = "block"; 
      document.getElementById('cardSuccess').style.display = "none"; 
      document.getElementById('cardError').style.display = "none"; 
      return true; 
     }else{ 
      document.getElementById('cardError').style.display = "block"; 
      document.getElementById('cardSuccess_1').style.display = "none"; 
      document.getElementById('cardSuccess').style.display = "none"; 
      return false; 
     } 

    } 

//END: FOR CREDIT CARD NUMBER 

    function validateForm(){ 
     // Set error catcher 
     var error = 0; 

     // Validate Credit Card 
     if(!validateCard(document.getElementById('card_no').value)){ 

      error++; 
     } 

     if(error > 0){ 
      return false; 
     } 

     //FOR EXPIRY VALIDATION 
     var datereg = /^(0[1-9]|1[012])[- /.](19|20)\d\d+$/; 
     if (!datereg.test(document.getElementById('credit_card_exp').value)) { 
      document.getElementById("expiry_error1").style.display="block"; 
      document.getElementById("expiry_error").style.display="none"; 
      return false; 
     } 

     var currentDate = new Date(); //this returns the current datetime 
     //Clear all the other date parts. 
     currentDate.setDate(0); 
     currentDate.setHours(0); 
     currentDate.setMinutes(0); 
     currentDate.setSeconds(0); 
     currentDate.setMilliseconds(0); 

     var year = parseInt(payment_form.credit_card_exp.value.split('/')[1]); 
     var month = parseInt(payment_form.credit_card_exp.value.split('/')[0]); 

     var dateToCheck = new Date(year,month,0,0,0,0,0); 

     if (dateToCheck.getTime() < currentDate.getTime()){ 
      //invalid date 
      document.getElementById("expiry_error").style.display="block"; 
      document.getElementById("expiry_error1").style.display="none"; 
      return false; 
     } 

     document.getElementById("expiry_error").style.display="none"; 
     document.getElementById("expiry_error1").style.display="none"; 
     return true; 
     //END FOR EXPIRY VALIDATION 
    } 


</script> 
<!-- END: VALIDATION IN CREDIT CARDS --> 

HTML :

validateCreditCard 및 validateExpiration

그럼 당신은 당신의 validateCreditCard 기능을 사용할 수 있습니다

<form id='payment_form' name="payment_form" method="post" action="exec_order_process.php" onsubmit="return validateForm();"> 
Card Number* 
<input class="form-control" onchange="return validateForm();" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" > 

<span class="alert alert-danger changeFont" id="cardError" style="display: none;">You must enter a valid Credit Card for VISA and MasterCard Only<span class="glyphicon glyphicon-remove"></span></span> 
<span class="alert alert-success changeFont" id="cardSuccess" style="display: none;">This is a VISA card <span class="glyphicon glyphicon-ok"></span></span> 
<span class="alert alert-success changeFont" id="cardSuccess_1" style="display: none;">This is a MasterCard <span class="glyphicon glyphicon-ok"></span></span> 

Expiration* 
<input onchange="return validateForm();" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" onchange="validCCForm(this);" required placeholder="MM/YYYY "> 

<label class="error" id="expiry_error" style="display: none;">Credit Card Expired</label> 
<label class="error" id="expiry_error1" style="display: none;">Enter valid Date Format</label> 

<input type="submit" value="Submit"> 
</form> 

Answer 1

당신은이 개 자바 스크립트 함수를 만들어야합니다 신용 카드 입력 (변경시) 및 validateExpir 만기 입력에 대한

validateForm 함수를 계속 사용할 수 있지만이 함수는 단순히 다른 모든 2 개의 함수를 호출하여 모든 입력을 검증합니다 (예를 들어 제출 전에 사용할 수 있음).

Answer 2

카드 번호 입력 요소가 포커스를 잃을 때 만료 날짜를 확인하는 이유는 해당 요소의 onchange 속성이 만료일을 확인하는 ValidateForm()을 호출하기 때문입니다.

1. 만료 날짜 유효성 검사 코드를 고유 기능 (단일 책임자)에 리 팩터합니다. 다음과 같이
2. credit_card_exp의 HTML 입력 요소
3. 리팩터링하여 입력 요소의 onchange를 속성에서 속성 onchange를 중복 제거 :

<label>Card Number*</label> 
 
<input onchange="validateCardNumber(this.value)" class="form-control" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" /> 
 
<label>Expiration*</label> 
 
<input onchange="validateExpirationDate(this.value)" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" required placeholder="MM/YYYY " />​

당신은 HTML onchange Attribute을 검토 할 수 있습니다 W3Schools.com 웹 사이트의 JavaScript/HTML Event 페이지를 참조하십시오.