Question

＆＃13;

var myForm = document.getElementById("form");
document.bgColor="#FFFFCC";  					//page styling
myForm.style.color="blue";	
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";


function validateForm() //form validation
{
	var firstname = document.getElementById("firstname"); //declared variables
	var lastname = document.getElementById("lastname");
	var postcode = document.getElementById("postcode");
	var email = document.getElementById("email");
	var cardtype = document.getElementById("cardtype");
	var cardnumber = document.getElementById("cardnumber");
	var ccv = document.getElementById("ccv");	
	var month = document.getElementById("month");
	var year = document.getElementById("year");
		  		
	if (firstname.value==""){	//validate first name
		alert("Your first name can not be left blank");		
		firstname.focus();
		return false;
	}		
	if (lastname.value==""){	//validate last name	
		alert("Your last name can not be left blank");		
		lastname.focus();
		return false;
	}	
	if (postcode.value.length!=4){ //validate post code 
		alert("Your post code must be 4 numbers in length");		
		postcode.focus();
		return false;
	}
	if (isNaN(document.getElementById("postcode").value)){
		alert("Your postcode can not contain letters");		
		postcode.focus();
		return false;
	}
	if (email.value.length<5 || email.value.indexOf("@")== -1){ //validate email
		alert("Your email must not be less than 5 charcters in length, it must contain an @ and a .");		
		email.focus();
		return false;
	}	
	if (email.value.indexOf(".")== -1){ 
		alert("Your email must not be less than 5 charcters in length, it must contain an @ and a .");		
		email.focus();
		return false;
	}	
	if (cardtype.value == ""){
		alert("Please enter your card type");		
		email.focus();
		return false;
	}
	if (cardnumber.value.length!=16){ //validate card number length
		alert("Your card number must be 16 numbers in length");		
		cardnumber.focus();
		return false;
	}	
	if (isNaN(document.getElementById("cardnumber").value)){
		alert("Your card number can not contain letters");		
		cardnumber.focus();
		return false;
	}						
	if (ccv.value.length!=3){ //validate ccv number length
		alert("Your ccv must be 3 numbers in length");		
		ccv.focus();
		return false;
	}
	if (isNaN(document.getElementById("ccv").value)){
		alert("Your ccv must be a number");		
		ccv.focus();
		return false;
	}		
}	
function checkDate(){ //check expiry date of card
	var date = new Date();
	var month = date.getMonth()+1; //get current month
	var year = date.getYear()+1;	//get current year
	var expiryMonth = document.getElementById("month").value;
	var expiryYear = document.getElementById("year").value;

	if (month == expiryMonth)//check if the current month has not expired
	{
		alert("Your card has expired");
		month.focus();
		return false;		
	}
	if (year == expiryYear) //check if the current year has not expired
	{
		alert("Your card has expired");
		year.focus();
		return false;
	}
	return false;//so the data is not cleared
	
}
	//alert("Your order has been successfully submitted thank you"); //notify user of correct submission
	//return true;
	
	//open up help window
function Popup(){	
		window.open( "file:///C:/Users/Andy2411/Desktop/4JSB/assignment/html/help.html", "myWindow", 
		"status = 1, height = 500, width = 500, resizable = 0" );
		return;
	}

＆＃13;

form{width:700px;margin:0 auto;}
#Div1{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;padding-bottom:20px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative;  top: -5%;   transform: translateY(5%);}

#Div2{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative;  top: -10%;   transform: translateY(10%);}

#Div3{text-align:center;margin:0 auto;display:;position: relative;  top: -190%;   transform: translateY(190%);}

＆＃13;

<!DOCTYPE html>
<html>
<!--Pseudocode
	INPUT firstname, lastname, postcode, email, cardtype, cardnumber, ccv, expiryMonth, expiryYear
	onsubmit = DO validateForm()
	END
	
	MODULE validateForm()
	IF (firstname =="") THEN
	OUTPUT error in firstname
	RETURN false
ENDIF
	IF (lastname =="") THEN
	OUTPUT error in lastname
	RETURN false
ENDIF
	IF (postcode.length!=4)   THEN
	OUTPUT error in postcode
	RETURN false
ENDIF
	IF (isNaN(document.getElementById("postcode").value)) THEN
	OUTPUT error in postcode
	RETURN false
ENDIF
	IF (email.value.length<5 || email.value.indexOf("@")== -1) THEN
	OUTPUT error in email
	RETURN false
ENDIF
	IF email.value.indexOf(".")== -1) THEN		
	OUTPUT error in email
	RETURN false		
ENDIF			
	IF (cardnumber.length!=16) THEN
	OUTPUT error in cardnumber
	RETURN false
ENDIF
	IF (isNaN(document.getElementById("cardnumber").value))
	OUTPUT error in cardnumber
	RETURN false
ENDIF
	IF (ccv.length !=3) THEN
	OUTPUT error in ccv
	RETURN false
ENDIF	
	IF (isNaN(document.getElementById("ccv").value))
	OUTPUT error in ccv
	RETURN false
ENDIF
	IF (month == expiryMonth) THEN
	OUTPUT error in month
	RETURN false
ENDIF
	IF (year == expiryYear) THEN
	OUTPUT error in year
	RETURN false
ENDIF
	OUTPUT correct
	RETURN true
END validateForm()-->

<head>
<title>Assignment4JSB</title>
<link rel="stylesheet" type="text/css" href="../css2/assignment.css" />
</head>
<body>
<form name=”userForm” autocomplete="on" id="form" onsubmit="return validateForm()">
<script src="../js2/assignment.js"></script>
<div id="Div1">
<h3>Order Form</h3>
<fieldset>
<legend>Enter your Details here</legend></br>
First name: <input type="text" id="firstname" size="30" />
<br /><br />
Last name: <input type="text" id="lastname" size="30" />
<br /><br />
Postcode: <input type="text" id="postcode" size="4" />
<br /><br />
Email: <input type="text" id="email" size="30" />
<br/><br/>
</fieldset>

<!--<table> 
<tr>
<td><label for="FirstName">First Name</label></td> 
<td><input type="text" name="FirstName" id="firstname" size="30" required="required" autofocus /></td>
</tr>
<tr>
<td><label for="LastName">Last Name</label></td>
<td><input type="text" name="LastName" id="lastname" size="30" required="required" /></td>
</tr>
<tr>
<td><label for="PostCode">Postcode</label></td>
<td><input type="text" name="PostCode" id="postcode" size="4" required="required" /></td>
</tr>
<tr>
<td><label for="Email">Email</label></td>
<td><input type="text" name="Email" id="email" size="30"/></td>
</tr>
</table>-->

<h3>Payment Details</h3>
<fieldset>
<legend>Please enter your payment details</legend><br/>
Credit Card  <select id="cardtype">
<option value=""></option>
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="AmericanExpress">American Express</option>
</select>
<br/><br/>
Card number  <input type="text" id="cardnumber" size="18"/>
<br/></br>
CCV  <input type="text" id="ccv" size="3"/>
<br/></br>
Expiry MM/YY  <select id="month" onsubmit="checkDate()">
<option value=""></option>
<option value="month">01</option>
<option value="month">02</option>
<option value="month">03</option>
<option value="month">04</option>
<option value="month">05</option>
<option value="month">06</option>
<option value="month">07</option>
<option value="month">08</option>
<option value="month">09</option>
<option value="month">10</option>
<option value="month">11</option>
<option value="month">12</option>
</select>
<select id="year" onsubmit="checkDate()">
<option value=""></option>
<option value="year">2016</option>
<option value="year">2017</option>
<option value="year">2018</option>
<option value="year">2019</option>
<option value="year">2020</option>
<option value="year">2021</option>
<option value="year">2022</option>
<option value="year">2023</option>
<option value="year">2024</option>
<option value="year">2025</option>
<option value="year">2026</option>
</select>
</fieldset>
</div>
<br/>
<div id="Div3">
<button type="submit" >Submit</button>
<button type="button" onClick="Popup()">Help</button><br/>
</div>
</form>
</body>
</html>

＆＃13;

我有一个JavaScript编写基本表单并验证用户输入，我已经到了我编写功能来检查信用卡到期日的阶段（必须根据当前日期检查月份和年份））然后向用户确认成功提交。我还想增加“帮助”的大小。并提交＆＃39;按钮并将它们垂直移动到窗体的底部。我无法使这个日期检查工作，我将附上我的工作到目前为止，任何帮助将不胜感激，谢谢。

Answer 1

您需要先检查年份，然后检查月份。

if (year > expiryYear) //check if the current  year has not expired
    {
        alert("Your card has expired");
        month.focus();
        return false;       
    }

if (year == expiryYear)
    {
        if(month >= expiryMonth) //check if the current month has not expired
        {
          alert("Your card has expired");
          month.focus();
          return false;
        }       
    }

或者你可以简单地把它写成

 if (year > expiryYear || ((year == expiryYear && month >= expiryMonth)) //check if the current  year has not expired
        {
            alert("Your card has expired");
            month.focus();
            return false;       
        }

Javascript表单日期检查

1 个答案: