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

Xi'an institute Service ( 用户名不能为空用户名不能为空); document.myform.txtUserName.focus( ); } }单击事件单击事件，，调用调用……单击事件单击事件，，调用调用 表单验证函数表单验证函数CISSST如何使用图片代替提交按钮为什么能进行表单验证，但即使是正确填写了表单，也为什么能进行表单验证，但即使是正确填写了表单，也 不能提交页面（点击“注册”没反映）？不能提交页面（点击“注册”没反映）？CISSST如何使用图片代替提交按钮查看源代码查看源代码因为图片不具备“提交”按钮的提交功能，所以需因为图片不具备“提交”按钮的提交功能，所以需 要人工调用提交方法要人工调用提交方法－－ submit( )要人工调用提交方法要人工调用提交方法submit( )function checkForm( ){function checkForm( ){ if ( document.myform.txtUserName.value.length==0) { alert(“用户名不能为空用户名不能为空！！“);alert( 用户名不能为空用户名不能为空！！ ); document.myform.txtUserName.focus( ); } else{else{ document.myform.submit( ); } } 如果表单输入合法如果表单输入合法则提交表单则提交表单}如果表单输入合法如果表单输入合法，，则提交表单则提交表单CISSST制作回车切换输入的效果输入完毕后回车，默认会提交表单。

输入完毕后回车，默认会提交表单页面效果页面效果 如何制作回车如何制作回车Tab切换效果？切换效果？页面效果页面效果CISSST制作回车切换输入的效果1、 使用键盘输入事件、 使用键盘输入事件onKeyDown事件事件 检查输入是否是回车键检查输入是否是回车键码码若是则将若是则将2、、 检查输入是否是回车键检查输入是否是回车键－－ASCII码码13，，若是则将若是则将 输入改为输入改为Tab键－键－ASCII码码9查看源代码查看源代码ftihF( ){function changeFocus( ){ if (event.keyCode==13) event.keyCode=9; }修改回车键为修改回车键为Tab键键Event事件对象包含输入键信息事件对象包含输入键信息}…………CISSST制作回车切换输入的效果上述注册页面中上述注册页面中，，需要给每个文本框添加键盘按需要给每个文本框添加键盘按上述注册页面中上述注册页面中，，需要给每个文本框添加键盘按需要给每个文本框添加键盘按 下事件，有没有更简单的办法？下事件，有没有更简单的办法？…………CISSST制作回车切换输入的效果通过给通过给document对象添加键盘事件对象添加键盘事件查看源代码查看源代码通过给通过给document对象添加键盘事件对象添加键盘事件如果按键是回车键，并且控件如果按键是回车键，并且控件 类型不是提交类型不是提交重置按钮等按重置按钮等按查看源代码查看源代码function changeFocus( ){ if (event.keyCode==13 }document.onkeydown= changeFocus ; document对象的对象的onkeydown事 件事 件，，它它将接收页将接收页面中面中所所有有的键的键，，将接收页所的键将接收页所的键 盘事件盘事件CISSST小结1根据提供的素材页面，实现游戏中的人物移动效果根据提供的素材页面，实现游戏中的人物移动效果练习答案练习答案练习素材练习素材提示：提示： 1、根据按下的方向键，改变层的、根据按下的方向键，改变层的Left或或Top坐标坐标 document.getElementById(“man“).style.pixelLeft document.getElementById(“man“).style.pixelTop 2方向键的方向键的ASCII码码2、、方向键的方向键的ASCII码码：： ↑向上键－向上键－38，，↓向下箭－向下箭－40 ←向左键向左键－－37→向右键向右键－－39←向左键向左键37，， →向右键向右键39 3、添加键盘事件：、添加键盘事件：document.onkeydown= move;CISSST制作即时提示错误的特效如何制作即时提示错误的特效？如何制作即时提示错误的特效？页面效果页面效果CISSST制作即时提示错误的特效使用使用DIV层的内容动态改变层的内容动态改变使用使用DIV层的内容动态改变层的内容动态改变在每个输入框后添加一个在每个输入框后添加一个 层层 根据用户的输入根据用户的输入 动动DIV层层, 根据用户的输入根据用户的输入, 动动 态显示错误信息态显示错误信息CISSST制作即时提示错误的特效演示实现步骤：演示实现步骤： 1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError （即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行演示示例4：演示示例4：演示素材演示素材CISSST制作即时提示错误的特效演示实现步骤：演示实现步骤：添加文本框失去焦点的事件函数添加文本框失去焦点的事件函数查看源代码查看源代码3、、添加文本框失去焦点的事件函数添加文本框失去焦点的事件函数：：获取插入的获取插入的DIV对象对象function checkLogin( ){ var myDiv=document.getElementById(“loginError“); myDiv.innerHTML=““; var strName=document.userfrm.loginName.value; if (strName.length == 0) { i i“ f'' 用户名不能为空用户名不能为空 /f“myDiv.innerHTML=“用户名不能为空用户名不能为空“; return; } }如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV 的的innerHTML或或innerText进行错误进行错误} ……提示，提示，innerText只能写文本信息只能写文本信息CISSST小结2完善”密码“和”电子邮件“的错误提示功能完善”密码“和”电子邮件“的错误提示功能练习答案练习答案练习素材练习素材提示：提示：练习答案练习答案练习素材练习素材1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数CISSST制作内容动态改变的层特效如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)？？如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)页面效果页面效果CISSST制作内容动态改变的层特效有哪些方法可以实现动态改变页面内容有哪些方法可以实现动态改变页面内容？？方法1：有哪些方法可以实现动态改变页面内容有哪些方法可以实现动态改变页面内容？？当动态显示的内容较少时，使用myDiv innerHTML=“HTML代码“myDiv.innerHTML= HTML代码 ；方法2：当动态显示的内容较多并相对固定时则预先制作好内容当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，然后使用myDiv.style.display=“none/block“；CISSST制作内容动态改变的层特效演示实现步骤：演示实现步骤：演示素材演示素材1、预先插入两个、预先插入两个DIV标签，分别放置不同计算方式显示的内容：标签，分别放置不同计算方式显示的内容：DIV1 按面积计算 显示的内容按面积计算 显示的内容DIV2 按贷款总额计按贷款总额计按贷款总额计按贷款总额计 算显示的内容算显示的内容CISSST制作内容动态改变的层特效演示实现步骤：演示实现步骤：查看源代码查看源代码2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算：隐藏隐藏DIV1ggp function InitDIV( ){ document.getElementById(“DIV1“).style.display=“none“; } }……页面加载时调用页面加载时调用CISSST制作内容动态改变的层特效3、添加函数，根据“计算方式”的选择，隐藏、添加函数，根据“计算方式”的选择，隐藏/显示对应显示对应DIV层：层： 查看源代码查看源代码function displayDIV( )查看源代码查看源代码根据单选按钮的值， 隐藏根据单选按钮的值， 隐藏/显示对应的层显示对应的层u c od sp yV( ) { if (document.myform. methodRadio[0].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“; } } INPUT“th dR di “Cli k “dilDIV( )“按钮的单击事件按钮的单击事件…… CISSST总结使用图片代替“提交按钮”时，如何实现表单验证 功能？功能？制作回车切换特效的思路是什么？制作回车Tab切换特效的思路是什么？制作即时提示错误特效的思路是什么？制作即时提示错误特效的思路是什么？制作内容动态改变的思路是什么？制作内容动态改变的思路是什么？。