资源预览内容
第1页 / 共53页
第2页 / 共53页
第3页 / 共53页
亲,该文档总共53页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第九章 表单和事件处理,教师:乔方辉,本章目标,InnerHTML的用法 表单的综合验证 键盘的使用,本章任务,演示示例2:表单的综合验证,演示示例3:用户输入信息的适时提示,用户输入信息的适时提示 表单的综合验证,制作即时提示错误的特效,innerHTML,innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。 比如说我一个div层里本来没有值,我触发一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,innerHTML,innerHTML是html标签的属性,成对出现的标签都有这么个属性,是开始标签和结束标签之间的字符,不包括标签本身, innerHTML 设置或获取位于对象起始和结束标签内的 HTML 比如 aaaaaaa bbbbbbbbbb 那么pp.innerHTM的内容就是: aaaaaaabbbbbbbbbb ss.innerHTML的内容就是: bbbbbbbbbb,制作即时提示错误的特效,使用DIV层的内容动态改变。,在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息,制作即时提示错误的特效,演示实现步骤: 1、在登录文本框后插入DIV标签loginError (即没有样式的DIV层) 2、修改源代码,设置DIV的显示方式为inline,即和文本框在同一行 ,制作即时提示错误的特效,function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为空; return; ,如果输入的信息不合法,则利用DIV的innerHTML或innerText进行错误提示,innerText只能写文本信息,获取插入的DIV对象,小结2,完善”密码“和”电子邮件“的错误提示功能。,提示: 1、密码和电子邮件文本框后各添加一个DIV标签 2、修改DIV的显示样式为inline 3、给各个文本框添加失去焦点onBlur的事件函数,制作内容动态改变的层特效,如何制作内容动态改变的特效(选择不同的计算方式)?,总结:有哪些方法可以实现动态改变页面内容?,方法1: 当动态显示的内容较少时,使用 myDiv.innerHTML=“HTML代码”; 方法2: 当动态显示的内容较多,并相对固定时,则预先制作好DIV内容, 然后使用myDiv.style.display=“none/block”;,制作内容动态改变的层特效,1、预先插入两个DIV标签,分别放置不同计算方式 显示的内容:,DIV1 按面积计算显示的内容,DIV2 按贷款总额计算显示的内容, function InitDIV( ) document.getElementById(DIV1).style.display=none; ,制作内容动态改变的层特效,2、添加函数,初始化DIV1不显示,默认按贷款总额计算:,隐藏DIV1,页面加载时调用,function displayDIV( ) if (document.myform. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; ,3、添加函数,根据“计算方式”的选择,隐藏/显示对应DIV层:,根据单选按钮的值,隐藏/显示对应的层,按钮的单击事件,表单验证的思路-5-1,表单的综合验证,注意:我们点提交按钮时实际上是表单的提交。所以触发的是表单的提交事件(onSubmit) . 发现,即使用户输入的不符合要求仍然能提交,注意,要注意的是,千万不能这样写写成 因为check()不通过后会返回false,因为onsubmit属性就像是这个html对象的一个方法名,默认返回true,所以还是相当于验证通过 记得对表单验证一定要写成这样, . 语法: onSubmit=”return 返回布尔型的函数”,onSubmit,onSubmit返回false时,不往Server传送数据,即表单不提交 如果表单没有通过验证,在函数中return false就会阻止表单的提交。 如果表单通过验证,在函数中return TRUE表单就会提交。,思路,1、每个判断用户输入的函数,都需要有返回值,当用户输入的信息不符合要求时就返回false,符合要求时就返回true,2、调用判断函数时,该在什么地方调用还是什么地方,最后写一个总的函数,共onsubmit()调用,表单验证的思路-5-2, function checkUserName() /验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;i 0) alert(名字中包含数字 n+请删除名字中的数字和特殊字符); return false else alert(请输入“名字”文本框); document.myform.txtUser.focus(); return false return true; ,验证用户名不能包含数字,获取表单元素的值,表单验证的思路-5-3, function passCheck() /验证密码 var userpass = document.myform.txtPassword.value; if(userpass = ) alert(未输入密码 n + 请输入密码); document.myform.txtPassword.focus(); return false; if(userpass.length ,验证密码不少于6位,获取表单元素的值,表单验证的思路-5-4, function validateform() if(checkUserName() ,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,为什么要这样调用函数,为什么要有返回值?,小结 2,编写如下图所示,实现注册表单的验证功能,年份必须是20打头,日期必须在1到31之间,按钮,正则表达式,身份证号,邮箱地址,邮编等等都有一定的格式,那么来制定格式的公式就叫正则表达式。 正则表达式是一门独立的课程,对于咱们不需要花时间去学习,用到时去网站上找想对应的正则表达式,正则表达式,正则表达式,如何使用图片代替提交按钮,为了美观,现把提交按钮变成图片,但仍然保持 表单的验证功能?如何实现?,使用图片的单击事件。onClick=checkForm( ),如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空!); document.myform.txtUserName.focus( ); ,检验是否为空,单击事件,调用表单验证函数,如何使用图片代替提交按钮,能进行表单验证,但即使是正确填写了表单,也 不能提交页面(点击“注册”没反映)。,如何使用图片代替提交按钮,因为图片不具备“提交”按钮的提交功能,所以需 要人工调用提交方法 submit( ) 。, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空!); document.myform.txtUserName.focus( ); else document.myform.submit( ); ,如果表单输入合法,则提交表单,如何使用图片代替提交按钮,如何使用图片代替提交按钮,如何使用图片代替提交按钮,制作回车切换输入的效果,输入完毕后回车,默认会提交表单 如何制作回车Tab切换效果?,制作回车切换输入的效果,1、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键ASCII码13,若是则将 输入改为Tab键ASCII码9, function changeFocus( ) if (event.keyCode=13) event.keyCode=9; ,键盘按下,调用实 现Tab效果的函数,修改回车键为Tab键,Event事件对象包含输入键信息,制作回车切换输入的效果,上述注册页面中,需要给每个文本框添加键盘按 下事件,有没有更简单的办法?, ,制作回车切换输入的效果,通过给document对象添加键盘事件。, function changeFocus( ) if (event.keyCode=13 ,如果按键是回车键,并且控件类型不是提交、重置按钮等按钮,则变为Tab切换,document对象的onKeyDown事件,它将接收页面中所有的键盘事件,小结1,根据提供的素材页面,实现游戏中的人物移动效果。,提示: 1、根据按下的方向键,改变层的Left或Top坐标 document.getElementById(man).style. Left document.getElementById(man).style. Top 2、方向键的ASCII码: 向上键38,向下箭40 向左键37, 向右键39 3、添加键盘事件:document.onKeyDown= move;,键盘控制层的移动,键值表,如何制作回车提交表单,本章总结,InnerHTML的用法 表单的综合验证 键盘的使用,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号