JS第06章 表单验证的相关事件

1、表单验证的相关事件表单验证的相关事件回顾回顾n 表单验证一般包括那些内容表单验证一般包括那些内容?n 表单验证的实现步骤。表单验证的实现步骤。n 文本框控件有哪些常用的属性、方法、事件？文本框控件有哪些常用的属性、方法、事件？2预习检查预习检查n 键盘输入对应的事件名称。键盘输入对应的事件名称。n 回车键和回车键和Tab键分别对应的键盘代码。键分别对应的键盘代码。n 举例说明：什么是失去焦点或获得焦点？举例说明：什么是失去焦点或获得焦点？3本章任务本章任务4演示示例演示示例1：回车切换输入的效果回车切换输入的效果演示示例演示示例2：即时提示错误的输入框即时提示错误的输入框演示示例演示示例3：内

2、容动态显示的层特效内容动态显示的层特效 制作回车切换输入的效果制作回车切换输入的效果制作内容动态显示的层特效制作内容动态显示的层特效制作即时提示错误的输入框制作即时提示错误的输入框本章目标本章目标n 会使用图片代替提交按钮会使用图片代替提交按钮n 会使用会使用onKeyDown事件事件检查用户输入的特殊字符检查用户输入的特殊字符n 会使用会使用DIV的的innerHTML或或innerText动态显示内容动态显示内容n 会使用多个会使用多个DIV动态隐藏或显示内容动态隐藏或显示内容5如何使用图片代替提交按钮如何使用图片代替提交按钮6为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按

3、钮变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？页面效果页面效果使用图片的单击事件。使用图片的单击事件。onClick=checkForm( )如何使用图片代替提交按钮如何使用图片代替提交按钮7根据上述分析和提供的素材页面来实现表单验证。根据上述分析和提供的素材页面来实现表单验证。素材页面素材页面 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( ); 检验是

4、否为空检验是否为空单击事件，调用单击事件，调用表单验证函数表单验证函数如何使用图片代替提交按钮如何使用图片代替提交按钮8能进行表单验证，但即使是正确填写了表单，也能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击不能提交页面（点击“注册注册”没反映）。没反映）。如何使用图片代替提交按钮如何使用图片代替提交按钮9因为图片不具备因为图片不具备“提交提交”按钮的提交功能，所以需按钮的提交功能，所以需要人工调用提交方法要人工调用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.lengt

5、h=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 查看源代码查看源代码如果表单输入合法，则提交表单如果表单输入合法，则提交表单制作回车切换输入的效果制作回车切换输入的效果10输入完毕后回车，默认会提交表单。输入完毕后回车，默认会提交表单。 页面效果页面效果如何制作回车如何制作回车Tab切换效果？切换效果？ 页面效果页面效果制作回车切换输入的效果制作回车切换输入的效果111、 使用键盘输入事件使用键盘输入事件onKeyDown事件事件 2、 检查输入

6、是否是回车键检查输入是否是回车键键码为键码为13，若是则将，若是则将 输入改为输入改为Tab键键码为键键码为9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 查看源代码查看源代码键盘按下，调用实键盘按下，调用实现现Tab效果的函数效果的函数修改回车键为修改回车键为Tab键键Event事件对象包含输入键信息事件对象包含输入键信息制作回车切换输入的效果制作回车切换输入的效果12上述注册页面中，需要给每个文本框添加键盘按上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？下事件，有没有更简单的办法？ 制

7、作回车切换输入的效果制作回车切换输入的效果13通过给通过给document对象添加键盘事件。对象添加键盘事件。 function changeFocus( ) if (event.keyCode=13 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按键是回车键，并且控件如果按键是回车键，并且控件类型不是提交、重置按钮等按类型不是提交、重置按钮等按钮，则变为钮，则变为Tab切换切换document对象的对象

8、的onKeyDown事件事件，它将接收，它将接收页面中所有的键盘事件页面中所有的键盘事件查看源代码查看源代码小结小结114根据提供的素材页面，实现游戏中的人物移动效果。根据提供的素材页面，实现游戏中的人物移动效果。提示：提示：1、根据按下的方向键，改变层的、根据按下的方向键，改变层的Left或或Top坐标坐标 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向键的、方向键的ASCII码：码： 向上键向上键38，向下箭向下箭40 向左键向左键37， 向右键向右键3

9、93、添加键盘事件：添加键盘事件：document.onKeyDown= move;练习答案练习答案 练习素材练习素材制作即时提示错误的特效制作即时提示错误的特效15如何制作即时提示错误的特效？如何制作即时提示错误的特效？页面效果页面效果制作即时提示错误的特效制作即时提示错误的特效16使用使用DIV层的内容动态改变。层的内容动态改变。 在每个输入框后添加一个在每个输入框后添加一个DIV层层, 根据用户的输入根据用户的输入, 动动态显示错误信息态显示错误信息制作即时提示错误的特效制作即时提示错误的特效17演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签logi

10、nError （即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材制作即时提示错误的特效制作即时提示错误的特效18演示实现步骤：演示实现步骤：3、添加文本框失去焦点的事件函数、添加文本框失去焦点的事件函数： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.log

11、inName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为空用户名不能为空; return; 查看源代码查看源代码如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV的的innerHTML或或innerText进行错误进行错误提示，提示，innerText只能写文本信息只能写文本信息获取插入的获取插入的DIV对象对象小结小结219完善完善”密码密码“和和”电子邮件电子邮件“的错误提示功能。的错误提示功能。提示：提示：1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显

12、示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数练习答案练习答案 练习素材练习素材 制作内容动态改变的层特效制作内容动态改变的层特效20如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)？页面效果页面效果制作内容动态改变的层特效制作内容动态改变的层特效n 方法方法1： 当动态显示的内容较少时，使用当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码代码”;n 方法方法2： 当动态显示的内容较多，并相对固定时，则预先当动态显示的内容较多，并相对固定时，则预先制作

13、好制作好DIV内容，内容， 然后使用然后使用 myDiv.style.display=“none/block”;21有哪些方法可以实现动态改变页面内容？有哪些方法可以实现动态改变页面内容？制作内容动态改变的层特效制作内容动态改变的层特效22演示实现步骤：演示实现步骤：1、预先插入两个、预先插入两个DIV标签，分别放置不同计算方式标签，分别放置不同计算方式显示的内容：显示的内容：DIV1按面积计算按面积计算显示的内容显示的内容DIV2按贷款总额计按贷款总额计算显示的内容算显示的内容演示素材演示素材制作内容动态改变的层特效制作内容动态改变的层特效23function InitDIV( )docum

14、ent.getElementById(DIV1).style.display=none; 演示实现步骤：演示实现步骤：2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算：隐藏隐藏DIV1页面加载时调用页面加载时调用查看源代码查看源代码制作内容动态改变的层特效制作内容动态改变的层特效24function 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、添加函数，根据、添加函数，根据“计算方式计算方式”的选择，隐藏的选择，隐藏/显示对