尝试验证一个简单的订单表单,并使用here中的那些验证设置我的所有验证,但它不起作用,我不太清楚为什么。我甚至无法从任何事情中得到警报,我已经宣布了所有变量,使用了正确的名称,但我显然做错了什么。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title> Books'r'Us - Contact</title>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
</div>
<!--Nav Bar-->
<header>
<div class="container">
<div id="brand">
<h1><a href="Ass1.html">Books<span class="highlight">'r'</span>us</a></h1>
</div>
<nav>
<ul>
<li><a href="Ass1.html">HOME</a></li>
<li><a href="books.html">BOOKS</a></li>
<li class="current"><a href="order.html">ORDER</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
<script src="formvalidation.js">
</script>
</header>
<section id="MainInfo">
<div class="container">
<h1> Order a book</h1>
</div>
</section>
<div class="dark2">
<html>
<hr>
<br>
<h1>Place your order</h1>
<form id="order" name="order" onsubmit="return formvalidation();">
Select your book<br>
<select name="book" id="book">
<option selected="" value="Default">-----</option>
<option value="Live well on Less">$19.00 - Live well on Less</option>
<option value="Eat Real Food">$29.99 - Eat Real Food</option>
<option value="My life. Its a long story">$32.99 - My life. Its a long story</option>
<option value="Middle School : Just My Rotten Luck">$15.99 - Middle School : Just My Rotten Luck</option>
<option value="Magnus Chase and the Sword of Summer">$15.99 - Magnus Chase and the Sword of Summer</option>
<option value="Clementine Rose and the Birthday Emergency">$12.99 - Clementine Rose and the Birthday Emergency</option>
</select> <br>
First Name:<br>
<input type="text" name="Cust_Name" id="Cust_Name" maxlength="100" size="30"><br>
<br>
Surname Name<br>
<input type="text" name="Cust_Name" id="Cust_Name" maxlength="100" size="30"><br>
<br>
Phone Number<br>
<input type="text" name="Cust_Phone" id="Cust_Phone" maxlength="12" size="15"><br>
<br>
Email Address<br>
<input type="email" name="Cust_Email" id="Cust_Email"><br>
<br>
Shipping Address<br>
<input type="text" name="Cust_Addr" id="Cust_Addr"><br>
<br>
Post Code<br>
<input type="text" name="Cust_Pcode" id="Cust_Pcode" maxlength="4" size="4"><br>
<br>
Payment Method<br>
<input type="radio" name="paymethod3" id="paymethod3" value="3">Master Card
<input type="radio" name="paymethod4" id="paymethod4" value="4">Visa
<input type="radio" name="paymethod5" id="paymethod5" value="5">American Express <br>
<br>
Card Holder's Name<br>
<input type="text" name="card_Name" id="card_Name" maxlength="100" size="30"><br>
<br>
Card Number<br>
<input type="text" name="card_numb" id="card_numb" maxlength="16" size="16"><br>
<br>
Expiry Month Expiry Year <br>
<select name="exp_month" id="exp-month">
<option value="">Month</option>
<option value="">-----</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="exp_year" id="exp_year">
<option value="">Year</option>
<option value="">----</option>
<option value="2012">2018</option>
<option value="2011">2019</option>
<option value="2010">2020</option>
<option value="2009">2021</option>
<option value="2008">2022</option>
<option value="2007">2023</option>
<option value="2006">2024</option>
</select><br>
<br>
Security Code<br>
<input type="text" name="card_sec" id="card_sec" maxlength="3" size="3"><br>
<hr>
<br>
<input type="submit" value="Order Book!" class="button_1">
</form>
</body>
</html>
使用Javascript:
function formValidation()
{
var book = document.order.book;
var Cust_Name = document.order.Cust_Name;
var Cust_Phone = document.order.Cust_Phone;
var Cust_Email = document.order.Cust_Email;
var Cust_Addr = document.order.Cust_Addr;
var Cust_Pcode = document.order.Cust_Pcode;
var Card_Name = document.order.card_Name;
var card_numb = document.order.card_numb;
var paymethod3 = document.order.paymethod3;
var paymethod4 = document.order.paymethod4;
var paymethod5 = document.order.paymethod5;
{
if(bookselect(book))
{
if(checkempty(Cust_Name,Cust_Phone,Cust_Email,Cust_Addr,Cust_Pcode))
{
if(allLetter(Cust_Name))
{
if(number(Cust_Phone))
{
if(alphanumeric(Cust_Addr))
{
if(number(Cust_Pcode))
{
if(validemail(Cust_Email))
{
if(validpaymethod(paymethod3,paymethod4,paymethod5))
{
if(number(Card_numb))
{
if(allLetter(Cust_Name))
}
}
}
}
}
}
}
}
}
}
return false;
}
//Checking for empty//
function checkempty(Cust_Name,Cust_Phone,Cust_Email,Cust_Addr,Cust_Pcode)
{
if (Cust_Name == "" || Cust_Phone == "" || Cust_Email == "" || Cust_Addr == "" ||Cust_Pcode == "")
{
alert("You must fill in your details")
return false;
}
else
{
return true;
}
}
//Checking book selected//
function bookselect(book)
{
if(book.value == "Default")
{
alert('Select your book from the list');
book.focus();
return false;
}
else
{
return true;
}
}
//Checking names are entered//
function allLetter(Cust_Name)
{
var letters = /^[A-Za-z]+$/;
if(Cust_Name.value.match(letters))
{
return true;
}
else
{
alert('First and Surnames must have alphabet characters only');
Cust_Name.focus();
return false;
}
}
// validating address//
function alphanumeric(Cust_Addr)
{
var letters = /^[0-9a-zA-Z]+$/;
if(Cust_Addr.value.match(letters))
{
return true;
}
else
{
alert('Customer address must have alphanumeric characters only');
Cust_Addr.focus();
return false;
}
}
// Number checks //
function number(Cust_Pcode, Cust_Phone)
{
var numbers = /^[0-9]+$/;
if(Cust_Pcode.value.match(numbers) || Cust_Phone.value.match(numbers) )
{
return true;
}
else
{
alert('Post code/Phone number must have numeric characters only');
return false;
}
}
//email check//
function ValidateEmail(Cust_Email)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(Cust_Email.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
Cust_Email.focus();
return false;
}
}
// card check //
function number(Card_numb)
{
var numbers = /^[0-9]+$/;
if(Card_numb.value.match(numbers) )
{
return true;
}
else
{
alert('Post code/Phone number must have numeric characters only');
// card name check //
function allLetter(Card_Name)
{
var letters = /^[A-Za-z]+$/;
if(Card_Name.value.match(letters))
{
return true;
}
else
{
alert('Card-holder name must have alphabet characters only');
}