Javascript表单验证程序无法正常工作

时间：2017-05-24 03:56:19

标签： javascript 

document.bgColor="#FFFFCC"; 
var myForm = document.getElementById("form"); //declare variables and page styling
var Div1 = document.getElementById("div1");
var Div2 = document.getElementById("div2");		
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 || (isNaN(document.getElementById("postcode").value))){ //vaildate post code
		alert("Please enter a valid post code");		
		postcode.focus();
		return false;
	}	
	if (email.value.length<5 || email.value.indexOf("@")== -1){ //validate email
		alert("Please enter a valid email");		
		email.focus();
		return false;
	}	
	if (email.value.indexOf(".")== -1){ 
		alert("Please enter a valid email");		
		email.focus();
		return false;
	}		
	if (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))){ //validate card number length
		alert("Please enter a valid card number");		
		cardnumber.focus();
		return false;
	}	
	if (ccv.length<3 || (isNaN(document.getElementById("ccv").value))){ //validate ccv number length
		alert("Please enter a valid ccv");		
		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;
	}
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: -10%;   transform: translateY(10%);}

#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: -180%;   transform: translateY(180%);}
<!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 || (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 (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))) THEN
	OUTPUT error in cardnumber
	RETURN false
ENDIF
	IF (ccv.length !=3 || (isNaN(document.getElementById("ccv").value))) THEN
	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()" onsubmit="return checkDate()">
<script src="../js2/assignment.js"></script>
<div id="Div1">
<h2>Order Form</h2>
<fieldset>
<legend>Enter your Details here</legend></br> 
<table> 
<tr>
<td><label for="firstname">First Name</label></td> 
<td><input type="text" name="First_Name" id="firstname" size="30" required="required" autofocus /></td>
</tr>
<tr>
<td><label for="Last_Name">Last Name</label></td>
<td><input type="text" name="Last_Name" 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>
</fieldset>
<h2>Payment Details</h2>
<fieldset>
<legend>Please enter your payment details</legend><br/>
Credit Card  <select id="cardtype" required="required">
<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="16" required="required"/>
<br/></br>
CCV  <input type="text" size="3" required="required"/>
<br/></br>
Expiry MM/YY  <select id="month" required="required">
<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 required="required" id="year">
<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>

这是一个javascript基础的作业，我必须写一个表格并验证用户输入的文本框和下拉框，包括信用卡的日期检查，我写的代码但有困难，看不到如果我出错了，任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分：0)

你犯了很多错误：

  • 您可以在元素
    • 中按时使用onsubmit属性
  • 返回语句总是在函数
    • 下

＆＃13;
＆＃13; 
export const SET_COMPANY = 'SET_COMPANY'
export const SET_ADDRESS_FIRST_LINE = 'SET_ADDRESS_FIRST_LINE'
export const SET_ADDRESS_SECOND_LINE = 'SET_ADDRESS_SECOND_LINE'
＆＃13; 
document.bgColor="#FFFFCC"; 
var myForm = document.getElementById("form"); //declare variables and page styling
var Div1 = document.getElementById("div1");
var Div2 = document.getElementById("div2");		
myForm.style.color="blue";	
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";

function validateForm() //form validation
{
	debugger;
	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 || (isNaN(document.getElementById("postcode").value))){ //vaildate post code
		alert("Please enter a valid post code");		
		postcode.focus();
		return false;
	}	
	if (email.value.length<5 || email.value.indexOf("@")== -1){ //validate email
		alert("Please enter a valid email");		
		email.focus();
		return false;
	}	
	if (email.value.indexOf(".")== -1){ 
		alert("Please enter a valid email");		
		email.focus();
		return false;
	}		
	if (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))){ //validate card number length
		alert("Please enter a valid card number");		
		cardnumber.focus();
		return false;
	}	
	if (ccv.length<3 || (isNaN(document.getElementById("ccv").value))){ //validate ccv number length
		alert("Please enter a valid ccv");		
		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
	
}
		
	//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: -10%;   transform: translateY(10%);}

#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: -180%;   transform: translateY(180%);}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题