第十六章 javascript表单验证与特效.pptVIP

WEB基础 目标 制作回车切换输入的效果 鼠标经过，表格当前行变色 全选/反选多个复选框 选项卡制作 表单验证 制作回车切换输入的效果 制作回车切换输入的效果 制作回车切换输入的效果 制作回车切换输入的效果 鼠标划过表格行变色 案例分析 制作思路 鼠标划过表格行变色-代码 复选框全选/全不选 案例分析 制作思路 实现代码 常见错误 常见错误 网页选项卡效果的制作 如何实现如下图所示的选项卡切换特效？ 制作思路 代码实现 代码实现 制作即时提示错误的特效 制作即时提示错误的特效 制作即时提示错误的特效 制作即时提示错误的特效 课堂练习 为什么需要表单验证 表单验证的内容 表单验证的内容 表单验证的思路 如何编写脚本验证表单？ 表单验证的实现 总结 本单元主要以实例的方式介绍了如何制作常见的脚本特效 灵活运作CSS的脚本特效 熟练掌握表单的提交验证 * JavaScript－10 表单验证与特效 输入完毕后回车，默认会提交表单。 如何制作回车Tab切换效果？ 1、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键－ASCII码13，若是则将 输入改为Tab键－ASCII码9 script language=javascript type=text/javascript function changeFocus( ){ if (event.keyCode==13) event.keyCode=9; } /script …… INPUT name=sname type=text class=borderBox onKeyDown=changeFocus( ) …… 键盘按下，调用实 现Tab效果的函数 修改回车键为Tab键 Event事件对象包含输入键信息 上述注册页面中，需要给每个文本框添加键盘按 下事件，有没有更简单的办法？ …… INPUT name=sname type=text class=borderBox onKeyDown=changeFocus( ) …… INPUT name=pass type=password class=borderBox id=pass size=25 onKeyDown=changeFocus( ) INPUT name=email type=text class=borderBox …… id=email size=24 onKeyDown=changeFocus( ) 通过给document对象添加键盘事件。 script language=javascript function changeFocus( ){ if (event.keyCode==13 event.srcElement.type!=button event.srcElement.type!=submit …) event.keyCode=9; } document.onKeyDown= changeFocus ; /script 如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换 document对象的onKeyDown事件，它将接收页面中所有的键盘事件 如何实现鼠标悬停时，表格行变色; 鼠标移出后复原？ 在每一行tr标签内加上onmouseover和onmouseout事件，动态改变行的样式表 能否通过程序来实现：在每一行tr标签内添加onmouseover和onmouseout事件及处理程序? script function Over(o) { o.style.backgroundColor=#CCC; } function Out(o) { o.style.backgroundColor=#FFF; } /script 要在每一行上，手动地添加鼠标移入移出事件 tr onmouseove=Over(this); onmouseout=Out(this); 如果表格行数很多时，就显得很繁琐，有没有更简便的方法？ 实现思路： 使用getElementById( )方法获得表格对象 遍历表格对象下的rows集合，动态添加鼠标移入移出事件及处理程序 编写脚本 var obj=document.getElementById(tb); for(var i=0;iobj.rows.length;i++){ //循环表格行设置鼠标事件 obj.rows[i].onmouseover=function()