JS编程小题目详解

一、题目：

编写一个网页文件，使用一个表单让用户填写购货订单。填写的信息包括姓名、电话、商品名称、单价、数量和金额。当提交表单时，要求：

(1)商品名称和单价只能让用户选择；

(2)数量为0时不予提交；

(3)金额在提交时自动计算，并与所填的"金额"比较；

(4)如(2)、(3)有错误时，则返回已填购货单，并提示错误位置和原因；如果没有错误，则返回已成功提交的页面。
 

二、结果截图（先给出截图看看网页结构是怎么样的，更有利于理解代码）

1、填写页面

2、当填写数量为空时（分为两种情况，一种是用户填了0，一种是用户根本就没有在这一行填信息，这种情况会先后提示两种错误，在下面截图提示数量不为空点击确定后还会提示金额不符）

3、金额不相符时

4、信息成功页面

三、代码详解

1、信息提交成功页面（这个没什么好说的，记住名字是new.html就够了，后面跳转用的上，当然你也可以起别的名字，只要跳转的时候正确填写就行了）

    
        
        
    
    
        

信息提交成功！

    

2、信息填写界面（注释我就直接在要注释的行后面用//表示了，想要粘贴仅仅是代码的小伙伴可以去上一篇博客粘贴）

购货订单

请输入姓名:




请填写电话号：




请填写数量：




请填写金额：




请填写商品名称：

//size代表你可以看见四个选项
苹果
梨
香蕉
西瓜
芒果





请填写单价：
5元/斤//要实现单选框，所以每个name值要一样，小伙伴可以试着把他们的name值改成不一样的就会发现可以实现多选
4元/斤
3元/斤

4、总结

很多标签和函数看着很简单，但是自己上手就会想不起来，出现各种各样的小问题，所以大家还是要自己试一试，我写的只是实现了题目的要求，小伙伴也可以自己加一些别的条件，比如名字不能为空，手机号码必须11位等约束来进一步改进代码。

这一题的分享就到这儿了，欢迎交流反馈哦^^