问题描述
我是HTML和javascript的新手,所以在此先感谢您的帮助。 我想做的是向表单添加验证。 我在信用卡到期日验证方面遇到了麻烦。 我希望如果该日期早于今天,那么它会触发“您的卡已过期。请选择一个有效的过期日期”警报。 目前,它可以让您提交过期日期。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Assignment 8</title>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function validate()
{
if( document.billing.cardnumber.value == "" ||
isNaN( document.billing.cardnumber.value ) ||
document.billing.cardnumber.value.length != 9 ){
alert( "Please provide a card number in the format #########." );
document.billing.cardnumber.focus() ;
return false;
}
if( document.billing.cardtype.value == "none" )
{
alert( "Please select a credit card type" );
document.billing.cardtype.focus() ;
return false;
}
return( true );
var today, someday;
var expirationmonth=document.getElementByName("expirationmonth");
var expirationyear=document.getElementByName("expirationyear");
today = new Date();
someday = new Date();
someday.setFullYear(expirationyear, expirationmonth, 1);
if (someday < today) {
alert("Your card is expired. Please select a valid expiration date");
return false;
}
}
</script>
</head>
<body>
<form action="/~ka14804/assignment4/assignment4.php" name="billing" onsubmit="return(validate());" method="post" >
<fieldset>
<legend>Billing:</legend>
<input type="radio" name="billtype" value="Credit Card" checked="checked"/>Credit Card
<input type="radio" name="billtype" value="Bill Customer"/>Bill Customer
</fieldset>
<br></br>
<label>Credit Card Type:</label>
<select name="cardtype">
<option value="none" selected>[choose yours]</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select>
<br></br>
Card Number:
<input type="text" name="cardnumber"/>
<br></br>
<label>Expiration Date:</label>
<select name="expirationmonth">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August" selected="selected">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="expirationyear">
<option value="2015" selected="selected">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>
</select>
<br></br>
<input type="checkbox" name="billingDefault" value="Set as default billing method" checked="checked"/>Set as default billing method
<br></br>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</a>
</p>
</body>
1楼
您必须获取元素的值,不能直接传递该元素:
var expirationmonth=document.getElementByName("expirationmonth");
var expirationyear=document.getElementByName("expirationyear");
today = new Date();
someday = new Date();
someday.setFullYear(expirationyear.value, expirationmonth.value, 1);
另外,该代码永远不会被调用,因为它上面是:
if( document.billing.cardtype.value == "none" )
{
//other stuff
return false;
}
return( true );
该部分将始终返回,这意味着其下的任何事情都将不会发生