javascript表单和事件PPT学习教案

1、会计学1javascript表单和事件表单和事件 InnerHTML的用法 表单的综合验证 键盘的使用第1页/共53页 演示示例2：表单的综合验证 演示示例3：用户输入信息的适时提示第2页/共53页第3页/共53页第4页/共53页第5页/共53页使用DIV层的内容动态改变。 在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息第6页/共53页演示实现步骤：1、在登录文本框后插入DIV标签loginError （即没有样式的DIV层）2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行 第7页/共53页 function checkLogin( ) var my

2、Div=document.getElementById(loginError); =; var strName=; if ( = 0) =用户名不能为空; return; 如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息获取插入的DIV对象第8页/共53页完善”密码“和”电子邮件“的错误提示功能。提示：1、密码和电子邮件文本框后各添加一个DIV标签2、修改DIV的显示样式为inline3、给各个文本框添加失去焦点onBlur的事件函数第9页/共53页如何制作内容动态改变的特效(选择不同的计算方式)？第10页/共53页第11

3、页/共53页1、预先插入两个DIV标签，分别放置不同计算方式显示的内容：DIV1按面积计算显示的内容DIV2按贷款总额计算显示的内容第12页/共53页function InitDIV( )document.getElementById(DIV1).style.display=none; 2、添加函数，初始化DIV1不显示，默认按贷款总额计算：隐藏DIV1页面加载时调用第13页/共53页function displayDIV( ) if (. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block;

4、 document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; 3、添加函数，根据“计算方式”的选择，隐藏/显示对应DIV层：根据单选按钮的值，隐藏/显示对应的层按钮的单击事件第14页/共53页第15页/共53页第16页/共53页第17页/共53页第18页/共53页第19页/共53页第20页/共53页第21页/共53页第22页/共53页第23页/共

5、53页第24页/共53页第25页/共53页第26页/共53页function checkUserName() /验证用户名 var fname = ; != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含数字 n+请删除名字中的数字和特殊字符); return false else alert(请输入“名字”文本框); (); return false return true; 验证用户名不能包含数字获取表单元素的值第27页/共53页function passChe

6、ck() /验证密码var userpass = ;if(userpass = )alert(未输入密码 n + 请输入密码);();return false; 6)alert(密码必须多于或等于 6 个字符。n);return false; return true; 验证密码不少于6位获取表单元素的值第28页/共53页 function validateform() if(checkUserName()&passCheck( ) return true; else return false; 同时调用验证用户名和验证密码方法表单的提交事件触发表单提交事件为什么要这样调用函数为什么要有返回值？

7、第29页/共53页每个文本框非空密码和再次输入的密码必须相同年份必须是20打头日期必须在1到31之间第30页/共53页第31页/共53页第32页/共53页第33页/共53页第34页/共53页为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？使用图片的单击事件。onClick=checkForm( )第35页/共53页根据上述分析和提供的素材页面来实现表单验证。 function checkForm( ) if ( =0) alert(用户名不能为空！); ( ); 检验是否为空单击事件，调用表单验证函数第36页/共53页能进行表单验证，但即使是正确填写了表单，也不能提交页面（

8、点击“注册”没反映）。第37页/共53页因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法 submit( ) 。 function checkForm( ) if ( =0) alert(用户名不能为空！); ( );else ( ); 如果表单输入合法，则提交表单第38页/共53页第39页/共53页第40页/共53页第41页/共53页输入完毕后回车，默认会提交表单如何制作回车Tab切换效果？第42页/共53页1、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键ASCII码13，若是则将 输入改为Tab键ASCII码9 function changeFocus

9、( ) if (=13) =9; 键盘按下，调用实现Tab效果的函数修改回车键为Tab键Event事件对象包含输入键信息第43页/共53页上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？ 第44页/共53页通过给document对象添加键盘事件。 function changeFocus( ) if (=13 & !=button & !=submit ) =9; = changeFocus ; 如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换document对象的onKeyDown事件，它将接收页面中所有的键盘事件第45页/共53页根据提供的素材页面，实现游戏中的人物移动效果。提示：1、根据按下的方向键，改变层的Left或Top坐标 document.getElementById(man).style. Left document.getElementById(man).style.