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，但是这个函数只会调用其他两个函数，以便验证所有输入（你可以在提交之前使用它）。

Answer 2

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

将到期日期验证代码重构为唯一函数（Single Responsibility Principal）。
从credit_card_exp html输入元素中删除重复的onchange属性
重构输入元素的onchange属性，如下所示：

＆＃13;

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

＆＃13;

您可以查看w3Schools.com网站上的HTML onchange Attribute和JavaScript/HTML Event页面以获取澄清。

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

2 个答案: