文档章节

验证一个表单。

蒙懵懵
 蒙懵懵
发布于 2015/12/07 13:55
字数 537
阅读 35
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
48分钟前
1
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
59分钟前
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
2
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部