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

《j12表单验证的相关事件和辅助特效练习》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12讲表单验证的相关事件和辅助特效练习内容回顾表单验证一般包括哪些内容?表单验证的实现思路？文本框控件有哪些常用的属性、方法、事件？2本讲问题键盘输入对应的事件名称有哪些?回车键和Tab键分别对应的ASCII码是多少？举例说明：什么是失去焦点或获得焦点？3本讲任务演示示例1：回车切换输入的效果演示示例2：即时提示错误的输入框演示示例3：内容动态显示的层特效制作回车切换输入的效果制作内容动态显示的层特效制作即时提示错误的输入框4会使用图片代替提交按钮实现表单提交会使用onKeyDown事件检查用户输入的特殊字符会使用DIV的innerHTML或innerText动态显示内容

2、会使用多个DIV动态隐藏或显示内容本讲目标5如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？页面效果使用图片的单击事件。onClick="checkForm()"6如何使用图片代替提交按钮根据上述分析和提供的素材页面来实现表单验证素材页面……functioncheckForm(){if(document.myform.txtUserName.value.length==0){alert("用户名不能为空！");document.myform.txtUserName.focu

3、s();}}……检验是否为空单击事件，调用表单验证函数7如何使用图片代替提交按钮为什么能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击“注册”没反映）？8如何使用图片代替提交按钮因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法－submit()functioncheckForm(){if(document.myform.txtUserName.value.length==0

4、){alert("用户名不能为空！");document.myform.txtUserName.focus();}else{document.myform.submit();}}查看源代码如果表单输入合法，则提交表单9制作回车切换输入的效果输入完毕后回车，默认会提交表单。页面效果如何制作回车Tab切换效果？页面效果10制作回车切换输入的效果1、使用键盘输入事件onKeyDown事件2、检查输入是否是回车键－ASCII码13，若是则将输入改为Tab键－ASCII码9

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

6、ox"onkeydown="changeFocus()">……12制作回车切换输入的效果通过给document对象添加键盘事件functionchan

7、geFocus(){if(event.keyCode==13&&event.srcElement.type!='button'&&event.srcElement.type!='submit'…)event.keyCode=9;}document.onkeydown=changeFocus;如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换document对象的onkeydown事件，它将接收页面中所有的键盘事件查看源代码13小结1根据提供的素材页面，实现游戏中的人物移动效果