一、题目：
编写一个网页文件，使用一个表单让用户填写购货订单。填写的信息包括姓名、电话、商品名称、单价、数量和金额。当提交表单时，要求：
(1)商品名称和单价只能让用户选择；
(2)数量为0时不予提交；
(3)金额在提交时自动计算，并与所填的"金额"比较；
(4)如(2)、(3)有错误时，则返回已填购货单，并提示错误位置和原因；如果没有错误，则返回已成功提交的页面。
二、结果截图（先给出截图看看网页结构是怎么样的，更有利于理解代码）
1、填写页面
2、当填写数量为空时（分为两种情况，一种是用户填了0，一种是用户根本就没有在这一行填信息，这种情况会先后提示两种错误，在下面截图提示数量不为空点击确定后还会提示金额不符）
3、金额不相符时
4、信息成功页面
三、代码详解
1、信息提交成功页面（这个没什么好说的，记住名字是new.html就够了，后面跳转用的上，当然你也可以起别的名字，只要跳转的时候正确填写就行了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>信息提交成功！</h1>
</body>
</html>
2、信息填写界面（注释我就直接在要注释的行后面用//表示了，想要粘贴仅仅是代码的小伙伴可以去上一篇博客粘贴）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购货订单</title>
<script language="javascript">
function result(){
var count=document.getElementById("count");
var b;//这里b是一个布尔类型的变量，用于之后的比较，但是JS中变量的声明用var就行，不用boolean哦
if(count.value==0||count.value==""){alert("填写数量行出错，数量不能为空");b=false;}//注意比较的是value，不要直接用count进行比较，而且value后面不要加括号，这里我是判断了两种情况，上面截图时已经作出了说明
var total=document.getElementById("total");//代表填的总金额
var price=document.getElementsByName("spot");//这里用的方法是getElementsByName，因为我们想实现的是单选框，所以每个单选框选项要设置相同的name值，在下面遇到的时候我还会提醒一下
for(var i=0;i<price.length;i++)//得到所有name为spot的元素的一个数组
{
if(price[i].checked==true)//判断选了哪一个
{
var dan=5-i; //代表单价
}
}
if((total.value)==(count.value)*dan){b=true;}
else{alert("数量和单价乘积不等于所填金额，请重新填"); b=false;}
if(b==true)
{
window.location.href="new.html";//跳转到成功界面
}
}
</script>
</head>
<body>
<font size=8 color=blue>
<h1 align=center size=7>购货订单</h1>
</font>
<font size=5 color=red>
<form name="biaodan" >
请输入姓名:
<input type="text" name="yourname" id="name">
<br/><br/>
请填写电话号：
<input type="text" name="yourphone" id="phone">
<br/><br/>
请填写数量：
<input type="text" name="yourhowmany" id="count">
<br/><br/>
请填写金额：
<input type="text" name="yourmoney" id="total">
<br/><br/>
请填写商品名称：
<font size=5 color=red>
<select name="selects" size=4>//size代表你可以看见四个选项
<option value="apple">苹果</option>
<option value="pear">梨</option>
<option value="banada">香蕉</option>
<option value="xigua">西瓜</option>
<option value="mangguo">芒果</option>
</select>
</font>
<br/><br/>
请填写单价：
<input type="radio" name="spot" value="sing">5元/斤//要实现单选框，所以每个name值要一样，小伙伴可以试着把他们的name值改成不一样的就会发现可以实现多选
<input type="radio" name="spot" value="sport">4元/斤
<input type="radio" name="spot" value="travel">3元/斤
<br/><br/><br/>
<input type="button" value="提交" onclick="result()">
</form>
</font>
</body>
</html>
4、总结
很多标签和函数看着很简单，但是自己上手就会想不起来，出现各种各样的小问题，所以大家还是要自己试一试，我写的只是实现了题目的要求，小伙伴也可以自己加一些别的条件，比如名字不能为空，手机号码必须11位等约束来进一步改进代码。
这一题的分享就到这儿了，欢迎交流反馈哦^^