Javascript信用卡号和过期日期验证

Question

问题是，我已经弄明白了（只需从stackoverflow复制/粘贴一些代码）。 但对我来说唯一重要的是; 每当我输入cc号并点击“Tab”时，它会自动验证到期时间。 我使用onchange属性为2个框。 请帮我调整我的代码。

我想要的结果是......

- 当我输入cc号码，并点击“Tab”时cc文本框的onchange属性[验证它]并且尚未验证Expiration文本框[尚未验证]。

我已经尝试了所有的东西，但它只是让它不起作用..我...我很抱歉，我不是很擅长构建javascripts。 谢谢。

使用Javascript

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

<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

您将不得不创建2个Javascript函数：

validateCreditCard和validateExpiration

然后，您可以在信用卡输入（更改时）上使用validateCreditCard函数，并在到期输入上使用validateExpiration。

您仍然可以保留函数validateForm，但是此函数将简单地调用其他2个函数，以便验证所有输入（例如，您可以在提交之前使用它）。

Answer 2

当卡号输入元素失去焦点时，验证过期日期的原因是该元素的onchange属性调用ValidateForm（），这是您验证过期日期的位置。

1. 将到期日期验证代码重构为唯一函数（Single Responsibility Principal）。
2. 从credit_card_exp html输入元素中删除重复的onchange属性
3. 重构输入元素的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 " />​ 

您可以查看w3Schools.com网站上的HTML onchange属性和JavaScript / HTML事件页面以获得澄清。