我终于能够验证我的单选按钮和复选框了。但是，我仍然有一些小问题。
问题1：
当我在填写所有必需信息后提交表单时，表单会输出所有选定的信息，但我注意到当我选中多个复选框时，它只在输出摘要中显示一个。有关如何获取其他所选复选框项目的任何提示，例如，如果我检查2项目，我应该在输出摘要页面中看到两个选中的项目
问题2：表单验证
对于每个文本字段，单选框和未选中的复选框，这意味着如果我要填写除了其中一个文本并提交表单而不选择单选框和复选框，我应该会收到一条警告说明缺什么。但是，警报在电子邮件之后的第1步之后结束。如果没有选中收音机框和复选框，它甚至不会发出警报，除非我点击提交再次验证表格。
如何强制from检查步骤1到3的验证？
我主要担心的是能够验证复选框并能够选择多个并让我的选择出现在输出中。
<html>
<head>
<title>Hello and JavaScript</title>
<script>
function doClear()/*This function clears the order form once it has been completed*/
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
}
function doSubmit() /*This function submits the order form once it has been completed*/
{
if (validateText()==false)
{
alert("Required data missing in Step 1");
}
if (validateRadio()==false)
{
alert("Required data missing in Step 2");
}
if(validateTops()==false)
{
alert("Required data missing in Step 3");
return;
}
/*This alerts tells the order form is complete and it will list all the customer information such as Name address etc.*/
var OrderWindow
OrderWindow = window.open("","","status,height=500,width=500");
OrderWindow.focus();
with (OrderWindow.document)
{
write("<h1><center>Customer Order Summary</center></h1><p>")
write("Name:" + document.PizzaForm.customer.value + "<br>")
write("Address:" + document.PizzaForm.address.value + "<br>")
write("City:" + document.PizzaForm.city.value + "<br>")
write("State:" + document.PizzaForm.state.value + "<br>")
write("Zip Code:" + document.PizzaForm.zip.value + "<br>")
write("Phone Number:" + document.PizzaForm.phone.value + "<br>")
write("E-Mail:" + document.PizzaForm.email.value + "<br>")
write("Pizza Size:" + validateRadio() + "<br>")
write("Pizza Toppings:" + validateTops() + "<br>")
write("<h3><center>Thank You for your Order.</center></h3><p>")
}
return;
}
function validateText()/*This function validate all the text field in step 1.*/
{
if (document.PizzaForm.customer.value == "")
{
alert("Please provide your name");
document.PizzaForm.customer.focus();
}
if (document.PizzaForm.address.value == "")
{
alert("Please provide your address.");
document.PizzaForm.address.focus();
}
if (document.PizzaForm.city.value == "")
{
alert("Please provide your City.");
}
if (document.PizzaForm.state.value == "")
{
alert("Please provide your State.");
}
if (document.PizzaForm.zip.value == "" ||
isNaN( document.PizzaForm.zip.value ) ||
document.PizzaForm.zip.value.length != 5 )
{
alert("Please provide your Zip code.");
document.PizzaForm.zip.focus() ;
}
if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) {
alert("Please provide a correct phone number.");
document.PizzaForm.phone.focus();
}
var emailID = document.PizzaForm.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct Email.")
document.myForm.Email.focus() ;
}
return (true);
}
function validateRadio()/*This function validates the radio selection*/
{
for(i=0;i<document.PizzaForm.sizes.length;i++)
if(document.PizzaForm.sizes[i].checked)
return document.PizzaForm.sizes[i].value;
alert("Please choose a pizza size.");
return false;
}
function validateTops()/*This function validates the checkbox selection*/
{
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked==true)
return document.PizzaForm.toppings[i].value;
alert("Please pick a topping of your choice.");
return false;
}
</s cript>
</ head>
<body>
<form Name ="PizzaForm">
<h1> The JavaScrpt Pizza Parlor</h>
<p>
<h4> Step 1: Enter your name, address, phone number, and email:</h4>
<font face="Courier New">
Name: <Input name="customer" size="50" type="text"><br>
Address: <Input name="address" size="50" type="text"><br>
City: <Input name="city" size="15"type="text">
State:<Input name="state" size="2"type="text"><br>
Zip: <Input name="zip" size="5"type="text"><br>
Phone: <Input name="phone" size="50"type="text"><br>
Email: <Input name="email" size="31"type="text"><br>
</ font>
</ p>
<p>
<h4> Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</ font>
</ p>
<p>
<h4> Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain
</ font>
</ p>
<!--
========================================================
The submit and clear form buttons belows.
========================================================
-->
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</ form>
</ body>
</ html>
答案 0 :(得分：0)
好的，我会尽力解决你的描述：
问题＃1：当你在一个函数中声明return时，就会结束它的执行。所以，在你的validateTops()上，当你找到第一个顶部时，你几乎就会结束它。这是另一种方法：
function validateTops()/*This function validates the checkbox selection*/
{
var toppings = []; //<== empty array
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked==true)
toppings.push(document.PizzaForm.toppings[i].value); //<== including on the array
if (toppings.length == 0) { //<== testing if array is empty, meaning 'no tops'
alert("Please pick a topping of your choice.");
return false;
} else { return toppings; }
}
我没有完全解决您的其他问题，但我认为这与您在验证过程中遗漏的步骤提醒有关，对吗？所以这里有别的东西：
var stepsMissing = []; //<== new empty array
if (validateText()==false) {
stepsMissing.push('Step 1');
}
if (validateRadio()==false) {
stepsMissing.push('Step 2');
}
if(!(validateTops())) { //<==same as "validateTops() == false", just so you know...
stepsMissing.push('Step 3');
}
if (stepsMissing.length > 0) {
alert('Requiring data missing in '+stepsMissing); //<== this is turning your validation message into one message. For keeping it separated in 3 alerts, you can use a for loop iterating through stepsMissing
}
另一件事：您正在调用您的验证功能一次，进行验证，然后再次调用它以满足您的需求＆＃34;订购表单＆＃34;。你不应该只调用一次并将返回值存储在本地变量上，那么你会测试它们然后在最终的订单表格中使用它们吗？我知道这些功能太简单了，但你不要浪费同样的事情来执行。
顺便说一句：如果你可以使用jQuery，你可以用更少的代码实现它，并以更易读的方式实现（imao）。