第六章第六章第六章第六章 表单验证的相关事件和辅助特效表单验证的相关事件和辅助特效表单验证的相关事件和辅助特效表单验证的相关事件和辅助特效回顾回顾表单验证一般包括那些内容表单验证一般包括那些内容?表单验证的实现步骤。表单验证的实现步骤。文本框控件有哪些常用的属性、方法、事件？文本框控件有哪些常用的属性、方法、事件？预习检查预习检查键盘输入对应的事件名称。键盘输入对应的事件名称。回车键和回车键和Tab键分别对应的键分别对应的ASCII码。码。举例说明：什么是失去焦点或获得焦点？举例说明：什么是失去焦点或获得焦点？本章任务本章任务演示示例演示示例1：回车切换输入的效果回车切换输入的效果演示示例演示示例2：即时提示错误的输入框即时提示错误的输入框演示示例演示示例3：内容动态显示的层特效内容动态显示的层特效 制作回车切换输入的效果制作回车切换输入的效果制作内容动态显示的层特效制作内容动态显示的层特效制作即时提示错误的输入框制作即时提示错误的输入框会使用图片代替提交按钮会使用图片代替提交按钮会使用会使用onKeyDown事件检查用户输入的特殊字符事件检查用户输入的特殊字符会使用会使用DIV的的innerHTML或或innerText动态显示内容动态显示内容会使用多个会使用多个DIV动态隐藏或显示内容动态隐藏或显示内容本章目标本章目标如何使用图片代替提交按钮如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？页面效果页面效果使用图片的单击事件。使用图片的单击事件。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 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按键是回车键，并且控件如果按键是回车键，并且控件类型不是提交、重置按钮等按类型不是提交、重置按钮等按钮，则变为钮，则变为Tab切换切换document对象的对象的onKeyDown事件，它将接收事件，它将接收页面中所有的键盘事件页面中所有的键盘事件查看源代码查看源代码小结小结1根据提供的素材页面，实现游戏中的人物移动效果。根据提供的素材页面，实现游戏中的人物移动效果。提示：提示：1、根据按下的方向键，改变层的、根据按下的方向键，改变层的Left或或Top坐标坐标 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向键的、方向键的ASCII码：码： 向上键向上键38，向下箭向下箭40 向左键向左键37， 向右键向右键393、添加键盘事件：添加键盘事件：document.onKeyDown= move;练习答案练习答案 练习素材练习素材制作即时提示错误的特效制作即时提示错误的特效如何制作即时提示错误的特效？如何制作即时提示错误的特效？页面效果页面效果制作即时提示错误的特效制作即时提示错误的特效使用使用DIV层的内容动态改变。层的内容动态改变。 在每个输入框后添加一个在每个输入框后添加一个DIV层层, 根据用户的输入根据用户的输入, 动态显示错误信息动态显示错误信息制作即时提示错误的特效制作即时提示错误的特效演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError （即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材制作即时提示错误的特效制作即时提示错误的特效演示实现步骤：演示实现步骤：3、添加文本框失去焦点的事件函数、添加文本框失去焦点的事件函数： 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的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点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层：层：查看源代码查看源代码根据单选按钮的值，根据单选按钮的值，隐藏隐藏/显示对应的层显示对应的层按钮的单击事件按钮的单击事件总结总结使用图片代替使用图片代替“提交按钮提交按钮”时，如何实现表单验证功能时，如何实现表单验证功能？制作回车制作回车Tab切换特效的思路是什么？切换特效的思路是什么？制作即时提示错误特效的思路是什么？制作即时提示错误特效的思路是什么？制作内容动态改变的思路是什么？制作内容动态改变的思路是什么？