基本的javascript表单验证有问题

时间:2017-09-06 10:58:57

标签: javascript html forms validation

尝试验证一个简单的订单表单,并使用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');  
}  

0 个答案:

没有答案