文档章节

验证一个表单。

蒙懵懵
 蒙懵懵
发布于 2015/12/07 13:55
字数 537
阅读 30
收藏 0
点赞 0
评论 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
博文 9
码字总数 8417
作品 0
深圳
10个强大的Javascript表单验证插件推荐

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

小鲅鱼 ⋅ 2012/04/20 ⋅ 4

强力推荐10款Javascript表单验证插件

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

开源中国 ⋅ 2012/04/20 ⋅ 0

简单方便的表单验证

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

哈库纳 ⋅ 2016/10/01 ⋅ 0

细说 Angular 2+ 的表单(二):响应式表单

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

接灰的电子产品 ⋅ 2017/06/13 ⋅ 0

MinJieLiu/react-validate-framework

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

MinJieLiu ⋅ 2017/01/02 ⋅ 0

jQuery验证框架(五)验证器 (jQuery validation)

jQuery验证框架 五、验证器( Validator ) validate方法返回的验证器对象( Validator Object) 有一些公用的方法。你可以用来触发验证程序或改变表单(form)的内容。验证器对象有更多的方法,不...

打杂 ⋅ 2010/11/16 ⋅ 1

前端框架Vue(11)——Vue+表单验证 VeeValidate 实践

这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件。 废话不多说直接显示效果: ...

docallen ⋅ 2017/06/23 ⋅ 0

表单验证第四部分: MailChimp订阅表单中的验证

表单验证第四部分: MailChimp订阅表单中的验证 W3CPlus2017-08-0716 阅读 表单验证 在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。 我们也学会了如...

W3CPlus ⋅ 2017/08/07 ⋅ 0

表单验证第二部分: 约束验证 API

表单验证第二部分: 约束验证 API W3CPlus2017-08-0710 阅读 表单约束api验证 在 上一篇文章中 , 我向大家展示了如何通过组合输入类型 (例如, ) 和验证属性 (像 和 )来使用原生的浏览器表单验...

W3CPlus ⋅ 2017/08/07 ⋅ 0

jQuery EasyUI使用教程之表单验证

本教程将向您展示如何验证一个表单。easyui框架提供一个validatebox插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用validatebox插件来验证表单,然后您可以根据自己的需求来...

Miss_Hello_World ⋅ 2016/08/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud 微服务 (六) 服务通信 RestTemplate

壹 通信的方式主要有两种,Http 和 RPC SpringCloud使用的是Http方式通信, Dubbo的通信方式是RPC 记录学习SpringCloud的restful方式: RestTemplate (本篇)、Feign 贰 RestTemplate 类似 Http...

___大侠 ⋅ 4分钟前 ⋅ 0

React创建组件的三种方式

1.无状态函数式组建 无状态函数式组件,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。 无状态函数式组...

kimyeongnam ⋅ 11分钟前 ⋅ 0

react 判断实例类型

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。 这里附上一个讲的很全面的文章: https://www.cnblogs.com/onepixel...

球球 ⋅ 18分钟前 ⋅ 0

Centos7备份数据到百度网盘

一、关于 有时候我们需要进行数据备份,如果能自动将数据备份到百度网盘,那将会非常方便。百度网盘有较大的存储空间,而且不怕数据丢失,安全可靠。下面简单的总结一下如何使用 bypy 实现百...

zctzl ⋅ 31分钟前 ⋅ 0

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 34分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 42分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 今天 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部