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

Gre*_*ett 4 html javascript forms validation

我是一个完整的Javascript初学者,我真的被困在我的任务上.我必须让用户输入信用卡详细信息并使用Javascript验证它们.这是我的问题.

  1. 当你没有选择任何东西时,付款类型会返回false(这就是我想要它做的事情),但是我已经使用类似的代码来表示过期的月份和年份,即使你没有制作,这两个代码也可以返回true选择,我希望他们返回false.

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

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

我的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;
}
Run Code Online (Sandbox Code Playgroud)

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> 
Run Code Online (Sandbox Code Playgroud)

Sri*_* DD 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;
}
Run Code Online (Sandbox Code Playgroud)

  • 正如 @Ujjaval 指出的,您需要执行 `exMonth - 1` 才能获得正确的月份。另外,您不想假设它是该月的第一天,因此您应该像“someday.setFullYear(exYear, exMonth - 1, someday.getDate());”那样获取该月的今天 (2认同)