表单验证的相关事件和辅助特效

1、第八章第八章表表单验证的相关事件和辅助特效单验证的相关事件和辅助特效12021/4/1回顾 表单验证一般包括那些内容? 表单验证的实现步骤。 文本框控件有哪些常用的属性、方法、事件？22021/4/1本章案例 制作回车切换输入的效果制作回车切换输入的效果 制作即时提示错误的输入框制作即时提示错误的输入框演示示例1：页面效果演示示例2：页面效果 制作内容动态显示的层效果制作内容动态显示的层效果演示示例3：页面效果32021/4/1学习目标 会使用图片代替提交按钮 会使用onKeyDown事件检查用户输入的特殊字符 会使用DIV的innerHTML或innerText动态显示内容 会使用多个DIV

2、动态隐藏或显示内容42021/4/1一、如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？使用图片的单击使用图片的单击事件事件 onClick=checkForm( )52021/4/1根据上述分析和提供的素材页面来实现表单验证。根据上述分析和提供的素材页面来实现表单验证。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.my

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

4、0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 如果表单输入合法，则提交表单如果表单输入合法，则提交表单82021/4/1二、制作回车切换输入的效果输入完毕后回车，默认会提交表单。输入完毕后回车，默认会提交表单。 如何如何制作回车制作回车Tab切换效果？切换效果？ 92021/4/11、 使用键盘输入事件使用键盘输入事件onKeyDown事件事件 2、 检查输入是否是回车键检查输入是否是回车键ASCII码码13，若是则，若是则将将 输入改为输入改为T

5、ab键键ASCII码码9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 键盘按下，调用实键盘按下，调用实现现Tab效果的函数效果的函数修改回车键为修改回车键为Tab键键Event事件对象包含输入键信息事件对象包含输入键信息102021/4/1上述注册页面中，需要给每个文本框添加键盘按上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？下事件，有没有更简单的办法？ 112021/4/1通过给通过给document对象添加键盘事件。对象添加键盘事件。 function changeFocus( ) i

6、f (event.keyCode=13 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按键是回车键，并且控件如果按键是回车键，并且控件类型不是提交、重置按钮等按类型不是提交、重置按钮等按钮，则变为钮，则变为Tab切换切换document对象的对象的onKeyDown事件事件，它将接收，它将接收页面中所有的键盘事件页面中所有的键盘事件查看源代码查看源代码122021/4/1根据提供的素材页面，实现游戏中的人

7、物移动效果。根据提供的素材页面，实现游戏中的人物移动效果。提示：提示：1、根据按下的方向键，改变层的、根据按下的方向键，改变层的Left或或Top坐标坐标 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向键的、方向键的ASCII码：码： 向上键向上键38，向下箭向下箭40 向左键向左键37， 向右键向右键393、添加键盘事件：添加键盘事件：document.onKeyDown= move;132021/4/1三、制作即时提示错误的特效如何制作即时提示错误的特效

8、？如何制作即时提示错误的特效？142021/4/1使用使用DIV层的内容动态改变。层的内容动态改变。 在每个输入框后添加一个在每个输入框后添加一个DIV层层, 根据用户的输入根据用户的输入, 动动态显示错误信息态显示错误信息152021/4/1演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError （即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材162021/4/1演示实现步骤：演示实现步骤

9、：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进行错误进

10、行错误提示，提示，innerText只能写文本信息只能写文本信息获取插入的获取插入的DIV对象对象172021/4/1完善完善”密码密码“和和”电子邮件电子邮件“的错误提示功能。的错误提示功能。提示：提示：1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数练习答案练习答案 练习素材练习素材 182021/4/1制作内容动态改变的层特效如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方

11、式)？页面效果页面效果192021/4/1制作内容动态改变的层特效 方法1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”； 方法2： 当动态显示的内容较多，并相对固定时，则预先制作好DIV内容， 然后使用 myDiv.style.display=“none/block”；有哪些方法可以实现动态改变页面内容？有哪些方法可以实现动态改变页面内容？202021/4/1制作内容动态改变的层特效演示实现步骤：演示实现步骤：1、预先插入两个、预先插入两个DIV标签，分别放置不同计算方式标签，分别放置不同计算方式显示的内容：显示的内容：DIV1按面积计算按面积计算显示的内

12、容显示的内容DIV2按贷款总额计按贷款总额计算显示的内容算显示的内容演示素材演示素材212021/4/1function InitDIV( )document.getElementById(DIV1).style.display=none; 制作内容动态改变的层特效演示实现步骤：演示实现步骤：2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算：隐藏隐藏DIV1页面加载时调用页面加载时调用查看源代码查看源代码222021/4/1function displayDIV( ) if (document.myform. methodRadio0.che

13、cked=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层：层：查看源代码查看源代码根据单选按

14、钮的值，根据单选按钮的值，隐藏隐藏/显示对应的层显示对应的层按钮的单击事件按钮的单击事件232021/4/1总结 使用图片代替“提交按钮”时，如何实现表单验证功能？ 制作回车Tab切换特效的思路是什么？ 制作即时提示错误特效的思路是什么？ 制作内容动态改变的思路是什么？242021/4/1 讲解需求说明讲解需求说明带提示文字的文带提示文字的文本框，获得焦点本框，获得焦点时内容自动清空时内容自动清空使用图片代替使用图片代替提交按钮提交按钮作业一作业一训练要点：训练要点：图片代替提交按钮图片代替提交按钮带提示文字的文本框带提示文字的文本框需求说明：需求说明：本阶段只验证本阶段只验证QQ号码输入是否为空号码输入是否为空252021/4/1阶段阶段1实现思路和关键代码：实现思路和关键代码：图片代替提交按钮，图片添加图片代替提交按钮，图片添加onClick事件事件表单提交：表单提交：document.myform.submit( )有文字提示的文本框：设置文本框的初始值，添加有文字提示的文本框：设置文本框的初始值，添加onFocus事件，在事件中将事件，在事件中