文档章节

验证一个表单。

蒙懵懵
 蒙懵懵
发布于 2015/12/07 13:55
字数 537
阅读 34
收藏 0

    这是五号那天写的,忘发了。

    例子都是《Head First Javascript》里的,我看一章内容就过一遍代码。这章是要弄一个表单,让用户确认必需数据,计算税额跟订单总额然后提交。

<html>
	<head>
		<title> Duncan's Just-In-Time Donuts</title>
		<link rel="stylesheet" type="text/css" href="donuts.css">
		<script type="text/javascript">
	function updateOrder() {
        const TAXRATE = 0.0925;//常量:税率
        const DONUTPRICE = 0.50;//常量:甜甜圈价格
        var numCakeDonuts = parseInt(document.getElementById("cakedonuts").value);
        //parseInt()将文本转换为数字(整数),还有一个parseFloat转成浮点数
        var numGlazedDonuts = parseInt(document.getElementById("glazeddonuts").value);
        if (isNaN(numCakeDonuts))// 内置函数isNaN()确认值是否不为数值
          numCakeDonuts = 0;//ture则值不是数字,蛋糕甜甜圈数量为0
        if (isNaN(numGlazedDonuts))
          numGlazedDonuts = 0;
        var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; //小计=甜甜圈数量*价格
        var tax = subTotal * TAXRATE; //税额=小计*税率
        var total = subTotal + tax; //总额=小计+税额
        document.getElementById("subtotal").value = "$" + subTotal.toFixed(2); 
        //toFixed()函数把金额四舍五入到小数点后两位
        document.getElementById("tax").value = "$" + tax.toFixed(2);
        document.getElementById("total").value = "$" + total.toFixed(2);
      }

      function placeOrder(form) { //提醒name和pickupmiuntes不能为空字符和不能为空字符或数字。
        if (document.getElementById("name").value == "")
        	alert("I'm sorry but you must provide your name before submitting an order.");
        else if (document.getElementById("pickupmiuntes").value =="" ||
      		isNaN(document.getElementById("pickupmiuntes").value))
      		alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.")
        else
          // Submit the order to the server
          form.submit();
      }
		</script>
	</head>
	<body>
	<div id="frame">
		<div class="head">Duncan's Just-In-Time Donuts</div>
		<div class="header">All donuts 50 cents each,cake or glarzed!</div> <br/>
		<div id="IMG">
			<img  src="donuttime.png" alt="donuttime"><br/>
		</div>

		<form name="orderform" action="donuts.php" method="POST">
			<div class="field">
			Name:<input type="text" id="name" name="name" value="">
			</div> 
			<div class="field">
			# of cake donuts:<input type="text" id="cakedonuts" name="cakedonuts" value="" onchange="updateOrder();"> 
			</div>
			<div class="field">
			# of glazed donuts:<input type="text" id="glazeddonuts" name="glazeddounts" value="" onchange="updateOrder();"> 
			</div>
			<div class="field">
			Minutes'til pickup:<input typr="text" id="pickupmiuntes" name="pickupmiuntes" value="">
			</div>
			<div class="field">
			Subtotal:<input type="text" id="subtotal" name="subtotal" valye="" readonly="readonly">//只读
			</div>
			<div class="field">
			Tax:<input type="text" id="tax" name="tax" value="" readonly="readonly">
			</div>
			<div class="field">
			Total:<input type="text" id="total" name="total" value="" readonly="readonly">
			</div></br>
			<div class="field">
			<input type="button" value="Place Order" onclick="placeOrder(this.form);">
			</div>

		</form>
	</div>
	</body>
</html>


donuts.css 文件:

body{
	font:14px,arial;
	text-align:center;
}

#frame{
	width:500px;
	height:350px;
	border:solid;
 	border-width:1px;
}

#IMG{
	float:left;
	padding-top:50px;
	width:150px;
	
}


div.head{
	margin:10px,20px;
	font:20px,arial;
	font-weight:bold;

}

div.header{
	margin:0,20px;
	font:15px,arial;
	font-style:italic;
}

div.field{
	text-align:right;
	margin-right:20px;
}


© 著作权归作者所有

共有 人打赏支持
蒙懵懵
粉丝 4
博文 14
码字总数 8417
作品 0
深圳
10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了10个不错的JavaS...

小鲅鱼
2012/04/20
40.8K
4
强力推荐10款Javascript表单验证插件

【IT168 技术】创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了1...

开源中国
2012/04/20
0
0
简单方便的表单验证

本节将会介绍如何使用 Hasor 强大的表单验证功能。在开始正文之前先墨迹两句为什么要使用表单验证功能。 通常一个表单在递交到后台之后我们在处理表单内容之前会做一些参数合法性校验。比如:...

哈库纳
2016/10/01
400
0
细说 Angular 2+ 的表单(二):响应式表单

细说 Angular 2+ 的表单(一):模板驱动型表单 响应式表单 响应式表单乍一看还是很像模板驱动型表单的,但响应式表单需要引入一个不同的模块: 而不是 与模板驱动型表单的区别 接下来我们还...

接灰的电子产品
2017/06/13
0
0
MinJieLiu/react-validate-framework

react-validate-framework 一个轻量、简单、易用的 表单验证组件 Demo: https://minjieliu.github.io/react-validate-framework 特性 轻量的体积 亲和的 API 内置常用验证方法 动态的验证 多...

MinJieLiu
2017/01/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud SpringBoot mybatis分布式Web应用的统一异常处理

我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况。Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用...

itcloud
17分钟前
0
0
c++ std::bind和std::function

定义于头文件 <functional> std::bind 函数绑定,https://zh.cppreference.com/w/cpp/utility/functional/bind // bind 用例#include <iostream>#include <functional> // 自定义的一......

SibylY
20分钟前
0
0
SecureCRT的安装与破解(过程很详细!!!)

SecureCRT的安装与破解(过程很详细!!!) SecureCRT的安装与破解(过程很详细!!!) 使用SecureCRT可以方便用户在windows环境下对linux主机进行管理,这里为大家讲一下SecureCRT的破解方...

DemonsI
24分钟前
0
0
介绍几款可用的web应用防火墙

目前有两款,基于软件和基于应用程序的web应用防火墙。基于软件的产品布置在Web服务器上,而基于应用程序的产品放置在Web服务器和互联网接口之间。两种类型的防火墙都会在数据传入和传出web...

上树的熊
31分钟前
1
0
用Visual Studio开发以太坊智能合约

区块链和以太坊 自从我熟悉区块链、以太坊和智能合约以来,一直失眠。 我一直在阅读,阅读和阅读,最后我能够使用一些工具,他们建议使用以太坊网站官方客户端应用程序(Ethereum Wallet)也...

geek12345
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部