如何使用Javascript验证信用卡到期日期?

时间:2014-11-21 05:52:20

标签: javascript html forms validation

我是一个完整的Javascript初学者,而且我真的坚持了我的任务。我必须让用户输入信用卡详细信息并使用Javascript验证它们。这是我的问题。

  1. 当您没有选择任何内容时,付款类型会返回false(这是我希望它做的事情),但是我已经在到期月份和年份使用了类似的代码,这两个即使你没有做出选择也可以返回,我希望他们返回假。

  2. 到期日验证我真的不知道该怎么做。它必须只接受今天之后的日期。我有点想出一些理论上应该有用的东西,但不是。是否有一些简单的东西(请记住我是初学者!)我可以添加或更改它会使它起作用吗?

  3. 信用卡号码验证的脚本也存在问题(需要16个号码),但莫名其妙地它似乎无法正常工作。

    < / LI>

    我的Javascript和HTML在下面。

    感谢您的帮助!

    致以最诚挚的问候,

    格雷格

    JAVASCRIPT

    function validateForm()
    {
    var firstName=document.getElementById("firstName");
    var lastName=document.getElementById("lastName");
    var email=document.getElementById("email");
    var postcode=document.getElementById("postcode");
    var paymentType=document.getElementById("paymentType");
    var exMonth=document.getElementById("exMonth").value;
    var exYear=document.getElementById("exYear").value;
    var cardNumber=document.getElementById("cardNumber").value;
    var date = new Date ();
    var month = date.getMonth();
    var year = date.getFullYear();
    
                if (firstName.value===""){
                            alert("Please enter your first name");
                            firstName.focus();
                            return false;
                }
                if (lastName.value===""){
                            alert("Please enter your last name");
                            lastName.focus();
                            return false;
                }
                if (email.value.indexOf(".") == -1 || email.value.indexOf("@")== -1) {
                            alert("Please include a valid email address");
                            email.focus();
                            return false;
                }
            if (postcode.value.length!=4  || isNaN(postcode.value)){
                            alert("Please enter 4 numbers for your postcode");
                            postcode.focus();
                            return false;
                }
            if (paymentType.selectedIndex === 0){
                alert("Please select payment type");
                return false;
            }
            if (exMonth.selectedIndex === 0){
                alert("Please select the month");
                return false;
            }
            if (exYear.selectedIndex === 0){
                alert("Please select the year");
                return false;
            }
            if (year> exYear || (year === exYear && month >= exMonth)){
                alert("The expiry date is before today's date. Please select a valid expiry date");
                return false;
            }
            if (cardNumber.value.length!=16  || isNaN(cardNumber.value)){
                            alert("Please enter 16 numbers for your credit card");
                            cardNumber.focus();
                            return false;
                }
                alert("Thank you for your submission");
                return true;
    }
    

    HTML

    <form name="myForm" autocomplete="on" onsubmit="return validateForm()">
    
    <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
    autofocus="autofocus" /> </label></p> 
    
    <p><label>Last name &#40;required&#41; <input type="text" id="lastName"/> </label></p>
    
    <p> Email address &#40;required&#41;
    <input type="text" id="email" /> </p> 
    
    <p> Postcode &#40;required&#41;
    <input type="text" id="postcode"/> </p> 
    
    <p> Payment type &#40;required&#41;
    <select id="paymentType" title="Choose a payment type">
      <option value="0">Select a payment option</option>
      <option value="visa">VISA</option>
      <option value="master">Mastercard</option>
      <option value="amer">American Express</option>
    </select>
    </p>
    
    <p> Expiry date &#40;required&#41;
    <select id="exMonth" title="select a month">
    <option value="0">Enter month</option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    
    <select id="exYear" title="select a year">
     <option value="0">Enter year</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
        <option value="2027">2027</option>
        <option value="2028">2028</option>
        <option value="2029">2029</option>
        <option value="2030">2030</option>
        <option value="2031">2031</option>
    </select>
    </p>
    <p><label>Credit card number &#40;required&#41; <input type="text" id="cardNumber"/> </label></p> 
    <div id="centreimg">
    <input type="submit" name="S1" value="Submit response" />
    <input type="reset" name="reset" value="Clear form" /> 
    </div>
    </form> 
    

5 个答案:

答案 0 :(得分:10)

对于信用卡到期验证,您可以这样做。

var today, someday;
var exMonth=document.getElementById("exMonth");
var exYear=document.getElementById("exYear");
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);

if (someday < today) {
   alert("The expiry date is before today's date. Please select a valid expiry date");
   return false;
}

答案 1 :(得分:1)

在以下代码中,您有一些偏差

var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
var email=document.getElementById("email");
var postcode=document.getElementById("postcode");
var paymentType=document.getElementById("paymentType");
//here why did you use .value. Probably removing .value would fix your issue
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
var cardNumber=document.getElementById("cardNumber").value;

将最后三行改为这样的

var exMonth=document.getElementById("exMonth");
var exYear=document.getElementById("exYear");
var cardNumber=document.getElementById("cardNumber");

答案 2 :(得分:0)

我正在做一些非常相似的事情。提供的答案对我的信用卡到期验证不起作用,但是这个答案确实如此。 (我用过你的变量)

if(exMonth.selectedIndex<month && exYear.selectedIndex<=year)
{
    alert("Please enter a valid expiration date");
    return false;
}

答案 3 :(得分:0)

使用inputmaskmoment

让我们说您希望动态地从今天的日期起10年的日期范围...

包括jQuery.InputMask.js和moment.js库(CDN或自托管)...

可选:CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/bindings/inputmask.binding.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js

HTML

<input type="text" id="expires_mmyy" name="cc_expires" maxlength="5" />

JS

$('#expires_mmyy').inputmask({
   alias: 'datetime', 
   inputFormat: 'mm/yy'
   min: moment().add(1, 'M').format('MM/YY'),
   max: moment().add(10, 'Y').format('MM/YY')
})

答案 4 :(得分:0)

我发现上一个答案有问题。我要在这里发布经过测试的解决方案。

他们没有考虑当天的先前答案的问题。要解决该问题,您必须使用该月的最后一天。要在Javascript中找到它,您可以使用 setFullYear(年,月,日),其中天为零。

奖金:javascript中的月份为0-11

但是,当您设置月份时,不应使用month-1。

例如: setFullYear(2020,6,0)//-> 2020年6月31日。

const today = new Date();
const ed = new Date();
ed.setFullYear(year, month, 0);

if (ed < today) {
}