购货订单表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/zsd0819qwq/article/details/103868968

练习03

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

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

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

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

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

结果：

表单填写界面：

提交成功界面：

报错提示：

代码：

main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购货订单</title>
		<script src="check.js"></script>
		<style type="text/css">
			.divForm{
				position: absolute;/*绝对定位*/
				width: 350px;
				height: 500px;
				border: 0;
				text-align: center;/*(让div中的内容居中)*/
				top: 30%;
				left: 50%;
				margin-top: -200px;
				margin-left: -150px;
			}
		</style>
	</head>
	<body>
	<div class="divForm">
			<span style="font-size: xx-large; color: orange; ">
				<h1 align=center>购货订单表</h1>
			</span>
			<span style="font-size: large;align-content: center">
					<form  name="table";>
						请输入姓名:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<input type="text" name="name" id="name">
						<br/><br/>
						请填写电话号：
						<input type="text" name="phone" id="phone">
						<br/><br/>
						请填写数量：&nbsp&nbsp&nbsp&nbsp
						<input type="text" name="number" id="count">
						<br/><br/>
						请填写金额：&nbsp&nbsp&nbsp&nbsp
						<input type="text" name="money" id="total">
						<br/><br/>
						请填写商品名称：
						<span style="font-size: large;">
							<select name="selects" size=4>
								<option value="apple">苹果</option>
								<option value="orange">橘子</option>
								<option value="banana">香蕉</option>
								<option value="watermelon">西瓜</option>
								<option value="pear">梨子</option>
							</select>
						</span>
						<br/><br/>
						请填写单价：
							<input type="radio" name="price" value="sing">1元/斤
							<input type="radio" name="price" value="sport">2元/斤
							<input type="radio" name="price" value="travel">3元/斤
						<br/><br/><br/>
						<input type="button" value="提交" onclick="check()">
					</form>
				</span>
		</div>
	</body>
</html>

check.js

function check(){
    const count = document.getElementById("count");
    var b;
    if(count.value==0||count.value==""){
        alert("填写数量行出错，数量不能为空");
        b=false;
    }
    var total = document.getElementById("total");
    var price=document.getElementsByName("price");
    var single;
    if(price!=null){
        // alert("test");
        var i;
        for(i=0;i<price.length;i++){
            if(price[i].checked){
                // alert("dasdhasdhashd");
                // alert("#"+i);
                single=i+1;
            }
        }
    }
    // alert(total.value+"---"+count.value);
    if((total.value)==(count.value)*single){
        b=true;
    } else{
        alert("数量和单价乘积不等于所填金额，请重新填写!");
        b=false;
    }

    if(b==true)
    {
        window.location.href="success.html";
    }
}

success.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>信息提交成功！</h1>
    </body>
</html>