JavaScript网页处理_4.ppt

《JavaScript网页处理_4.ppt》由会员分享，可在线阅读，更多相关《JavaScript网页处理_4.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript表单处理JAVASCRIPTJAVASCRIPT知识回顾p常用的浏览器对象有哪些？p希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？phistory对象的哪个方法相当于IE浏览器中的后退按钮？p希望动态改变网页的背景色，应使用哪个对象的bgColor属性？pIE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息JAVASCRIPTJAVASCRIPT内容摘要p使用与以下各项关联的事件处理程序：q文本框 q文本区域 q命令按钮 q复选框 q单选按钮 q组合框 p编写用于验证表单的 JavaScript 代码JAVASCRIP

2、TJAVASCRIPT事件处理程序和表单元素简介当用户单击当用户单击“注册注册”按钮时，将弹出一条消息按钮时，将弹出一条消息function button_click()alert(“请向本网站注册请向本网站注册);JAVASCRIPTJAVASCRIPT文本框对象p文本框元素用于在表单中输入字、词或一系列数字p可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素JAVASCRIPTJAVASCRIPT文本框对象 事件处理程序文本框事件onBlur文本框失去焦点onChange文本框的值被修改onFocus光标进入文本框中方法focus()获得焦点，即

3、获得鼠标光标select()选中文本内容，突出显示输入区域属性readonly 只读，文本框中的内容不能修改 JAVASCRIPTJAVASCRIPT文本框对象cardpricenumbertotmyformJAVASCRIPTJAVASCRIPT文本框对象添加无边框样式JAVASCRIPTJAVASCRIPT文本框对象-onChange 事件处理程序function clearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;function check()var a=document.myfor

4、m.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();document.myform.card.select();function compute()var price=document.myform.price.value;var number=document.myform.number.value;document.myform.tot.value=price*number;onFocus事件调用的函数clearText（）（）清空帐号文本框中的内容onBlur事件

5、调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字onChange事件调用的函数compute()用来计算总价 JAVASCRIPTJAVASCRIPT文本框对象 .帐号：.单价：￥.数量：个总价：￥.帐号文本框添加onFocus和onBlur焦点事件价格只读属性数量文本框添加onChange事件JAVASCRIPTJAVASCRIPT命令按钮对象p命令按钮对象是网页中最常用的元素之一JAVASCRIPTJAVASCRIPT“按钮-事件处理程序表表单单元素元素事件事件处处理程序理程序说说明明命令按钮onSubmit表单提交事件，单击“提交”按钮时产生，此事件属于元素，不属于提

6、交按钮onClick按钮单击事件onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。JAVASCRIPTJAVASCRIPT命令按钮事件处理程序JAVASCRIPTJAVASCRIPTuserNamepass1pass2type=resettype=submitmyformJAVASCRIPTJAVASCRIPT命令按钮对象function check()var userName=document.myform.userName.value;var pass1=document.myform.pass1.value;var pass2

7、=document.myform.pass2.value;if(pass1=pass2)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎恭喜您，注册成功！欢迎 +userName+光临光临！);return true;else alert(密码不能为空！密码不能为空！n请输入密码请输入密码);return false;else alert(确认码必须和输入的密码相同确认码必须和输入的密码相同！);return false;onSubmit事件调用的函数：输入数据检查如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提

8、醒用户重填JAVASCRIPTJAVASCRIPT复选框对象p当用户需要在选项列表中选择多项时，可以 使用复选框对象p要创建复选框对象，请使用 标签请选择您的爱好 电影 电影JAVASCRIPTJAVASCRIPT复选框-事件处理程序复选框事件onBlur复选框失去焦点onFocus 复选框获得焦点 onClick 复选框被选定或取消选定属性checked复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 value设置或获取复选框的值JAVASCRIPTJAVASCRIPT复选框-事件处理程序JAVASCRIPTJAVASCRIPTc

9、heckbox1checkbox2checkbox3设置复选框的值checkbox4myformJAVASCRIPTJAVASCRIPT复选框-事件处理程序function buy()var s=;if(document.myform.checkbox1.checked=true)/如果被选中如果被选中 s=s+document.myform.checkbox1.value+“n”;/累计选中的商品累计选中的商品 if(document.myform.checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document

10、.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s=s+document.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品您定购了以下物品:+s+);JAVASCRIPTJAVASCRIPT复选框-事件处理程序function buy()var s=;if(document.m

11、yform.checkbox1.checked=true)/如果被选中如果被选中 s=s+document.myform.checkbox1.value+“n”;/累计选中的商品累计选中的商品 if(document.myform.checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s

12、=s+document.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品您定购了以下物品:+s+);单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品是为了原样显示字符串中的换行”n”格式 onClick=buy()“JAVASCRIPTJAVASCRIPT复选框-事件处理程序function buy()var s=;for(var i=0;i document.myform.mybox.length;i+)/判断第i个复选框

13、是否被选中 if(document.myform.myboxi.checked=true)s=s+document.myform.myboxi.value+n;if(confirm(您准备购买以下物品，确定吗？：n+s)=true)document.write(您购买了以下物品:+s+);/其他代码略 /其他代码略2.使用数组和for循环大大简化代码1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox JAVASCRIPTJAVASCRIPT单选按钮对象p当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象p要创建单选按钮对象，请使用 标签男女JAVASCRIP

14、TJAVASCRIPT单选按钮-事件和属性单选按钮事件onBlur单选按钮失去焦点onFocus 单选按钮获得焦点 onClick 单选按钮被选定或取消选定属性checked单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 value设置或获取单选按钮的值JAVASCRIPTJAVASCRIPT单选按钮-事件处理程序为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组JAVASCRIPTJAVASCRIPT单选按钮事件处理程序function buy()var s=;for(var i=0;i docum

15、ent.myform.mybox.length;i+)/判断第判断第i个复选框是否被选中个复选框是否被选中 if(document.myform.myboxi.checked=true)s=s+document.myform.myboxi.value+n;/判断买家选项是否选中判断买家选项是否选中 if(document.myform.myradio0.checked=true)if(confirm(您准备您准备买进买进以下物品，确定吗？：以下物品，确定吗？：n+s)=true)document.write(您买进了以下物品您买进了以下物品:+s+);else if(confirm(您准备您准

16、备卖出卖出下物品，确定吗？：下物品，确定吗？：n+s)=true)document.write(您卖出了以下物品您卖出了以下物品:+s+);根据用户是买家还是卖家，弹出不同的确认信息框判断是否选中第一个单选判断是否选中第一个单选按钮按钮(买家买家)JAVASCRIPTJAVASCRIPT下拉列表框 -请选择开户帐号的城市-北京市 上海市 重庆市 天津市 四川省 山东省 湖北省JAVASCRIPTJAVASCRIPT下拉列表框-事件和属性下拉列表框事件onBlur下拉列表框失去焦点onChange当选项发生改变时产生onFocus下拉列表框获得焦点属性value下拉列表框中，被选选项的值opti

17、ons所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options0，第二个即为options1，其他以此类推selectedIndex返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推JAVASCRIPTJAVASCRIPT下拉列表框-事件和属性options选项数组选项数组options0options1selectedIndex属性：表示被选中的索引号：3value属性：被选中选项的值JAVASCRIPTJAVASCRIPT下拉列表框-事件处理程序JAVASCRIPTJAVASCRIPT下拉列表框-事件处理程序userNamemyselectm

18、ycitymyformJAVASCRIPTJAVASCRIPT下拉列表框-事件处理程序 function myfun1()var d=document.myform.myselect.selectedIndex;if(d=1|d=2|d=3|d=4)/北京、上海、重庆、天津北京、上海、重庆、天津 document.myform.city.value=document.myform.myselect.optionsd.text;function myfun2()var userName=document.myform.userName.value;var province=document.my

19、form.myselect.value;var city=document.myform.city.value;document.write();document.write(您的注册信息如下您的注册信息如下：);document.write();document.write(姓名：姓名：+userName);document.write(帐号开户省份：帐号开户省份：+province);document.write(帐号开户城市：帐号开户城市：+city);JAVASCRIPTJAVASCRIPT下拉列表框-事件处理程序 function myfun1()var d=document.myf

20、orm.myselect.selectedIndex;if(d=1|d=2|d=3|d=4)/北京、上海、重庆、天津北京、上海、重庆、天津 document.myform.city.value=document.myform.myselect.optionsd.text;function myfun2()var userName=document.myform.userName.value;var province=document.myform.myselect.value;var city=document.myform.city.value;document.write();docume

21、nt.write(您的注册信息如下您的注册信息如下：);document.write();document.write(姓名：姓名：+userName);document.write(帐号开户省份：帐号开户省份：+province);document.write(帐号开户城市：帐号开户城市：+city);.下拉列表框onChange事件调用的函数：判断选择的省份是否是直辖市单击”快速注册“图片时调用的函数myfun2()，显示注册信息JAVASCRIPTJAVASCRIPT表单验证 2-1pJavaScript 最常见的用法之一就是验证表单p对于检查用户输入是否存在错误和是否疏漏了必选项，Ja

22、vaScript 是一种十分便捷的方法JAVASCRIPTJAVASCRIPT表单验证 2-2function validate()var f=document.reg_form;if(f.uname.value=)alert(请输入姓名);f.uname.focus();return false;if(f.gender0.checked=false&f.gender1.checked=false)alert(请指定性别);f.gender0.focus();return false;if(f.password.value.length 6)|(f.password.value=)alert(

23、请输入至少 6 个字符的密码！);f.password.focus();return false;检查姓名检查性别检查密码JAVASCRIPTJAVASCRIPT表单验证 2-2q=f.email.value.indexOf();if(q=-1)alert(请输入有效的电子邮件地址);f.email.focus();return false;if(f.age.value 99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();return false;JAVASCRIPTJAVASCRIPT表单验证 2-2q=f.email.value.inde

24、xOf();if(q=-1)alert(请输入有效的电子邮件地址);f.email.focus();return false;if(f.age.value 99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();return false;检查邮件地址检查年龄JAVASCRIPTJAVASCRIPT课堂重点 pOnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序p在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序p当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序 p当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序pJavaScript的主要功能之一是用于表单验证JAVASCRIPTJAVASCRIPT谢 谢http:/