javascript表单事件

命令按钮事件处理程序userNamepass1pass2type=resettype=submitmyform命令按钮对象f
unctioncheck(){varuserName=document.myform.userName.value;
varpass1=document.myform.pass1.value;varpass2=document.myf
orm.pass2.value;if(pass1==pass2){if(pass1.length!=0)
{document.write("

恭喜您，注册成功！欢迎"+userN
ame+"光临！

");returntrue;}else{alert
("密码不能为空！\n请输入密码");returnfalse;}}else{ale
rt("确认码必须和输入的密码相同！");returnfalse;}}="myform"onSubmit="returncheck()">onSubmit事件调用的函数：输入数据检查如果
输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填复选框对象当用户需要在选项列表
中选择多项时，可以使用复选框对象要创建复选框对象，请使用标签请选择您的爱好ckbox”value=“电影”>电影电影复选框-
事件处理程序复选框·事件onBlur复选框失去焦点onFocus复选框获得焦点onClick复选框被选定
或取消选定属性checked复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选
框是否被选中value设置或获取复选框的值复选框-事件处理程序checkbox1checkbox2checkbo
x3设置复选框的值checkbox4myform复选框-事件处理程序"JavaScript">functionbuy(){vars="";if(document.myform.c
heckbox1.checked==true)//如果被选中s=s+document.myform.checkbox
1.value+“\n”;//累计选中的商品if(document.myform.checkbox2.checked==t
rue)s=s+document.myform.checkbox2.value+"\n";if(document
.myform.checkbox3.checked==true)s=s+document.myform.checkbo
x3.value+"\n";if(document.myform.checkbox4.checked==true)
s=s+document.myform.checkbox4.value+"\n";//if(confirm("您定购了以下物
品，确定吗？：\n"+s)==true)document.write("您定购了以下物品:

"+s+"

");}单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品

是为了原样显
示字符串中的换行”\n”格式>"onClick="bu
y()“>复选框-事件处理程序functionbuy(
){vars="";for(vari=0;i){//判断第i个复选框是否被选中if(document.myform.mybox[i].checked==tru
e)s=s+document.myform.mybox[i].value+"\n";}if(confir
m("您准备购买以下物品，确定吗？：\n"+s)==true)document.write("您购买了以下物品:RE>"+s+"

");}//…其他代码略ype="checkbox"id="mybox"value="国服魔兽金币">//…其他代码略2.使用数组和for循环大大
简化代码1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox单选按钮对象当用户只需要从选项列表中选
择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用标签lue=“M”>男女单选按钮-事件和属性单选按钮·事件
onBlur单选按钮失去焦点onFocus单选按钮获得焦点onClick单选按钮被选定或取消选定属性check
ed单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中val
ue设置或获取单选按钮的值单选按钮-事件处理程序为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组
单选按钮－事件处理程序functionbuy(){v
ars="";for(vari=0;i判断第i个复选框是否被选中if(document.myform.mybox[i].checked==true)
s=s+document.myform.mybox[i].value+"\n";}//判断买家选项是否选中if(d
ocument.myform.myradio[0].checked==true){if(confirm("您准备买进
以下物品，确定吗？：\n"+s)==true)document.write("您买进了以下物品:

"+s+"

");}else{if(confirm("您准备卖出下物品，确定吗？：\n"+s)==true)
document.write("您卖出了以下物品:

"+s+"

");}}根据用户是买家还
是卖家，弹出不同的确认信息框判断是否选中第一个单选按钮(买家)参考答案：1）window，location，histor
y，document等2）onload事件，open（）方法3）back（）方法4）document对象5）locati
on告诉学员：任何特定事件处理程序都有一列与其关联的表单元素。本章将讨论各种表单元素以及这些元素的常用事件处理程序。文
本框、文本区域、按钮和复选框等各种表单元素都支持不同类型的事件处理程序。讲解要点：onChange事件onChange
事件将跟踪用户在文本框中所作的修改,当用户在文本框中完成修改之后，将激活该事件。select（）方法选中文本内容，突出显示输入
区域，一般用于提示用户重新输入。readonly属性某些文本框希望用户不能修改，例如，某个拍卖网站的起拍价，一般是卖方或拍卖公
司定价，所以希望用户不能修改，这时可以指定readonly只读属性讲解这些事件，为后面的例子讲解打基础。讲解步骤：
1.先演示例子：参考TG10-Source文件夹中的“文本框”用例。2.提问：如何实现，应使用文本框哪些事件？哪些方法引导：
1）onFocus，onBlur，onchange事件)select（）和focus()方法3.实现步骤：1）使用Dre
amWeaver设计页面，如上图所示。2）添加无边框样式，进入下一页幻灯片。讲解步骤：演示添加无边框样式：HTML
选择器INPUT。3）添加脚本代码，进入下一页幻灯片讲解要点：1）帐号文本框添加onFocus和onBlur焦点事
件：帐号文本框获得焦点时，调用clearText()清空提示信息，失去焦点时调用check()函数检查输入的数据是否有效
2）数量文本框添加onChange事件：文本框的内容发生改变，即当用户修改或重新填写购买数量时，调用compute()函数，
将自动计算购买总价的值。提问学员：前面我们学习过表单和表单元素，按钮分为哪三类？回答：提交按钮、重置按钮、普通按钮
讲解要点：onClick事件我们比较熟悉，我们重点学习onSubmit表单提交事件。当客户端点击提交按钮，准备提交表单信息到
远程服务器时，将产生onSubmit表单提交事件。利用此事件，我们可以在表单信息提交到服务器之前，检验客户端输入的数据是否合法、有
效，如我们比较熟悉的电子邮件格式是否正确、年份输入是否合法等。讲解步骤：1.先演示例子：参考TG10-Source文件夹中
的“按钮”用例。2.提问：如何实现，应使用按钮的哪个事件？解题思路？引导：1）onSubmit事件)比较两个框的值是否相
等即可。3.实现步骤：1）使用DreamWeaver设计页面，如上图所示。2）添加细边框样式，上例已经演示过，给学员提一下就
行。3）编写脚本代码，点击进入下一页幻灯片。讲解步骤：1.先演示例子：参考TG10-Source文件夹中的“复选框”用
例。2.提问：如何实现，应使用复选框的哪些属性？解题思路？引导：1）是否选中：checked属性以及复选框的值：value
)检查每个复选框是否选中，获取哪些复选框被选中了。3.实现步骤：1）使用DreamWeaver设计页面，如上图所示。2）添
加红色细边框样式，上例已经演示过，给学员提一下就行。3）编写脚本代码，点击进入下一页幻灯片。讲解要点：1）通过字符串相
连，累计被选中的商品名称2）因为商品交易需要提醒用户确认，所以弹出确认信息框3）

是为了原样显示字符串中的换行”\n
”格式，否则浏览器将忽略换行格式，连续显示。4）提问：上述代码没什么问题，代码是不是不够简洁？如果选项有很多，比如10种商
品呢？岂不是使用10个if条件语句引导：if语句比较冗长。哪如何简化呢？我们可以采用数组，点击进入下一页幻灯片。引导学
员一起回顾：1）和C语言一样，数组必须是存放相同数据类型的数据，它们都使用同一个变量名，如a根据下标来标识每个数据，第一个
数据表示为a[0],第二个数据a[1]，其他以此类推。同理，部分HTML元素中也支持数组的用法。2）改进上述例子，把上述4个复
选框的名称都改为“mybox”，即使这4个复选框构成一个数组mybox，第一个复选框就是mybox[0]，第二个就是mybox[1
]，其他以此类推。既然是数组，和以前我们学习数组一样，它常常和for循环配合使用，此例我们只需要循环检查每隔复选框是否选中就可以了
讲解步骤：1.先演示例子：参考TG10-Source文件夹中的“单选按钮”用例。添加了买家、卖家的单选按钮。我们需要
知道用户是买家还是卖家。提问学员，使用什么属性？checked2.讲解代码讲解要点：结合上图讲解每个属性
讲解步骤：1.先演示例子：参考TG10-Source文件夹中的“下拉列表框”用例。特意演示：如果省份中选中直辖市（如上海
市），城市文本框将自动显示上海市，表示用户不用再填写城市文本框了。2.提问学员：如何实现，列表框的什么事件？列表框的哪些属性
。引导：选项发生改变事件：onchange，属性：value（被选中的选项），selectedIndex(被选中的索引号)等
3.让我们看看实现步骤，点击进入下一页幻灯片。实现步骤：1）设计页面2）编写脚本代码，点击进入下一页幻灯片综合例
子：表单验证讲解要点：1）告诉学员：js的主要功能之一就是表单验证：在提交到服务器之前，在客户端验证用户填写的表单数据格式是
否正确。2）演示例子：参考“TG10-Source”文件夹中的“表单验证“用例第十章处理表单和表单元素事件回顾常用的
浏览器对象有哪些？希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？histo
ry对象的哪个方法相当于IE浏览器中的后退按钮？希望动态改变网页的背景色，应使用哪个对象的bgColor属性？IE的地址栏对应
哪个浏览器对象？它用来保存网页的地址信息目标使用与以下各项关联的事件处理程序：文本框文本区域命令按钮复选框
单选按钮组合框编写用于验证表单的JavaScript代码事件处理程序和表单元素简介2-1type=“button”value=“注册"onClick="button_click()">当事件发生时，将执行与之相
关的JavaScript代码当发生特定事件时，事件处理程序指定要执行哪些JavaScript代码事件处理程序和表
单元素简介2-2当用户单击“注册”按钮时，将弹出一条消息。
functionbutton_click(){alert(“请向本网站注册);}e=“button”value=“注册“onClick="button_click()">文本框对象文本框元素用于在表单
中输入字、词或一系列数字可以通过将HTML的INPUT标签中的type设置为“text”，以创建文本框元素UTtype="text"name="t1">文本框对象–事件处理程序文本框事件onBlur文本框失去焦点
onChange文本框的值被修改onFocus光标进入文本框中方法focus()获得焦点，即获得鼠标光标sele
ct()选中文本内容，突出显示输入区域属性readonly只读，文本框中的内容不能修改文本框对象cardpri
cenumbertotmyform文本框对象添加无边框样式文本框对象-onChange事件处理程序PTlanguage="JavaScript">functionclearText(){if(docum
ent.myform.card.value=="输入您的会员帐号")document.myform.card.val
ue="";}functioncheck(){vara=document.myform.card.value;
if(a.substr(0,2)!="10"||isNaN(a)){alert("格式错误，请重新输入
");document.myform.card.focus();document.myform.ca
rd.select();}}functioncompute(){varprice=document.
myform.price.value;varnumber=document.myform.number.value
;document.myform.tot.value=pricenumber;}onFocus事件调用的函数cle
arText（）清空帐号文本框中的内容onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字on
Change事件调用的函数compute()用来计算总价文本框对象
.......