javascript表单和事件[知识课件]

1、教师：乔方辉教师：乔方辉 1优质荟萃 本章目标本章目标 InnerHTML的用法 表单的综合验证 键盘的使用 本章任务本章任务 演示示例演示示例2 2：表单的综合验证表单的综合验证 演示示例演示示例3 3：用户输入信息的适时提示：用户输入信息的适时提示 用户输入信息的适时提示用户输入信息的适时提示 表单的综合验证 制作即时提示错误的特效制作即时提示错误的特效 innerHTML ninnerHTML跟表单里面的value属性有点类似，能够控制层 的显示值。 n比如说我一个div层里本来没有值，我触发一个事件后要显 示值，那 么 就 能够使用 i nne r H T M L 属性了，其实 inn

2、erHTML属性除了能控制层以外，还能控制窗口内容的 所有元素 n innerHTML ninnerHTML是html标签的属性，成对出现的标签都 有这么个属性，是开始标签和结束标签之间的字符 ，不包括标签本身， ninnerHTML 设置或获取位于对象起始和结束标签内的 HTML n比如 n naaaaaaa nbbbbbbbbbb n n那 么 p p . i n n e r H T M 的 内 容 就 是 ： a a a a a a a bbbbbbbbbb nss.innerHTML的内容就是： bbbbbbbbbb 制作即时提示错误的特效制作即时提示错误的特效 使用使用DIV层的内容

3、动态改变。层的内容动态改变。 在每个输入框后添加一个在每个输入框后添加一个 DIV层层, 根据用户的输入根据用户的输入, 动动 态显示错误信息态显示错误信息 制作即时提示错误的特效制作即时提示错误的特效 演示实现步骤：演示实现步骤： 1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError （即没有样式的（即没有样式的DIV层）层） 2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 制作即时提示错误的特效制作即时提示错误的特效 function checkLogin( ) var myDiv=docum

4、ent.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为用户名不能为 空空; return; 如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV 的的innerHTML或或innerText进行错误进行错误 提示，提示，innerText只能写文本信息只能写文本信息 获取插入的获取插入的DIV对象对象 小结小结2 完善完善”密码密码“和和”电子邮件电子邮件“

5、的错误提示功能。的错误提示功能。 提示：提示： 1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签 2、修改、修改DIV的显示样式为的显示样式为inline 3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数 制作内容动态改变的层特效制作内容动态改变的层特效 如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)？ 总结：总结：有哪些方法可以实现动态改变页有哪些方法可以实现动态改变页 面内容？面内容？ n方法1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代

6、码”； n方法2： 当动态显示的内容较多，并相对固定时，则预先 制作好DIV内容， 然后使用myDiv.style.display=“none/block”； 制作内容动态改变的层特效制作内容动态改变的层特效 1、预先插入两个、预先插入两个DIV标签，分别放置不同计算方式标签，分别放置不同计算方式 显示的内容：显示的内容： DIV1 按面积计算按面积计算 显示的内容显示的内容 DIV2 按贷款总额计按贷款总额计 算显示的内容算显示的内容 function InitDIV( ) document.getElementById(DIV1).style.display=no ne; 制作内容动态改变

7、的层特效制作内容动态改变的层特效 2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算： 隐藏隐藏DIV1 页面加载时调用页面加载时调用 function displayDIV( ) if (document.myform. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).

8、style.display=block; document.getElementById(DIV1).style.display=none; 3、添加函数，根据、添加函数，根据“计算方式计算方式”的选择，隐藏的选择，隐藏/显示对应显示对应DIV层：层： 根据单选按钮的值，根据单选按钮的值， 隐藏隐藏/显示对应的层显示对应的层 按钮的单击事件按钮的单击事件 表单验证的思路表单验证的思路-5-1 表单的综合验证表单的综合验证 n注意：我们点提交按钮时实际上是表单的提 交 。 所 以 触 发 的 是 表 单 的 提 交 事 件 （ onSubmit） n n. n n发现，即使用户输入的不符合要求仍

9、然能提 交 注意注意 n要注意的是，千万不能这样写写成 n因为check()不通过后会返回false， 因为 onsubmit属性就像是这个html对象的 一个方法名，默认返回true，所以还是相当 于验证通过 n记得对表单验证一定要写成这样 n n n. n n语法： nonSubmit=”return 返回布尔型的函数” onSubmit onSubmit返回false时，不往Server传送数据 ，即表单不提交 n如果表单没有通过验证，在函数中return false就会阻止表单的提交。 n如果表单通过验证，在函数中return TRUE表 单就会提交。 思路思路 n1、每个判断用户输入

10、的函数，都需要有返 回值，当用户输入的信息不符合要求时就返 回false，符合要求时就返回true n2、调用判断函数时，该在什么地方调用还 是什么地方 n最后写一个总的函数，共onsubmit（）调用 表单验证的思路表单验证的思路-5-2 function checkUserName() /验证用户名验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) ale

11、rt(名字中包含数字名字中包含数字 n+请删除名字中的数字和特殊字符请删除名字中的数字和特殊字符); return false else alert(请输入请输入“名字名字”文本框文本框); document.myform.txtUser.focus(); return false return true; 验证用户名不验证用户名不 能包含数字能包含数字 获取表单元素的值获取表单元素的值 表单验证的思路表单验证的思路-5-3 function passCheck() /验证密码验证密码 var userpass = document.myform.txtPassword.value; if(u

12、serpass = ) alert(未输入密码未输入密码 n + 请输入密码请输入密码); document.myform.txtPassword.focus(); return false; if(userpass.length 6) alert(密码必须多于或等于密码必须多于或等于 6 个字符。个字符。n); return false; return true; 验证密码不少于验证密码不少于6位位 获取表单元素的值获取表单元素的值 表单验证的思路表单验证的思路-5-4 function validateform() if(checkUserName() else return false;

13、 同时调用验证用户同时调用验证用户 名和验证密码方法名和验证密码方法 表单的提交事件表单的提交事件 触发表单提交事件触发表单提交事件 为什么要这样为什么要这样 调用函数调用函数 为什么要有返为什么要有返 回值？回值？ 小结小结 2 编写如下图所示，实现注册表单的验证功能 每个文本每个文本 框非空框非空 密码和再次输入密码和再次输入 的密码必须相同的密码必须相同 年份必须年份必须 是是20打头打头 日期必须在日期必须在 1到到31之间之间 按钮按钮 正则表达式正则表达式 n身份证号，邮箱地址，邮编等等都有一定的 格式，那么来制定格式的公式就叫正则表达 式。 n正则表达式是一门独立的课程，对于咱们

14、不 需要花时间去学习，用到时去网站上找想对 应的正则表达式 正则表达式正则表达式 正则表达式正则表达式 如何使用图片代替提交按钮如何使用图片代替提交按钮 为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？表单的验证功能？如何实现？ 使用图片的单击事件。使用图片的单击事件。onClick=checkForm( ) 如何使用图片代替提交按钮如何使用图片代替提交按钮 根据上述分析和提供的素材页面来实现表单验证。根据上述分析和提供的素材页面来实现表单验证。 function checkForm( ) if ( document.myform

15、.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( ); 检验是否为空检验是否为空 单击事件，调用单击事件，调用 表单验证函数表单验证函数 如何使用图片代替提交按钮如何使用图片代替提交按钮 能进行表单验证，但即使是正确填写了表单，也能进行表单验证，但即使是正确填写了表单，也 不能提交页面（点击不能提交页面（点击“注册注册”没反映）。没反映）。 如何使用图片代替提交按钮如何使用图片代替提交按钮 因为图片不具备因为图片不具备“提交提交”按钮的提交功能，所以需按钮的提交功能，

16、所以需 要人工调用提交方法要人工调用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( ); else document.myform.submit( ); 如果表单输入合法，则提交表单如果表单输入合法，则提交表单 如何使用图片代替提交按钮如何使用图片代替提交按钮 如何使用图片代替提交按钮如何使用图片代替提交按钮 如何使用图片代替提交按钮如何使用图片代替

17、提交按钮 制作回车切换输入的效果制作回车切换输入的效果 输入完毕后回车，默认会提交表单输入完毕后回车，默认会提交表单 如何制作回车如何制作回车Tab切换效果？切换效果？ 制作回车切换输入的效果制作回车切换输入的效果 1、 使用键盘输入事件使用键盘输入事件onKeyDown事件事件 2、 检查输入是否是回车键检查输入是否是回车键ASCII码码13，若是则将，若是则将 输入改为输入改为Tab键键ASCII码码9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 键盘按下，调用实键盘按下，调用实 现现Tab效果的函数效果的函

18、数 修改回车键为修改回车键为Tab键键 Event事件对象包含输入键信息事件对象包含输入键信息 制作回车切换输入的效果制作回车切换输入的效果 上述注册页面中，需要给每个文本框添加键盘按上述注册页面中，需要给每个文本框添加键盘按 下事件，有没有更简单的办法？下事件，有没有更简单的办法？ 制作回车切换输入的效果制作回车切换输入的效果 通过给通过给document对象添加键盘事件。对象添加键盘事件。 function changeFocus( ) if (event.keyCode=13 document.onKeyDown= changeFocus ; 如果按键是回车键，并且控件如果按键是回车键，并且控件 类型不是提交、重置按钮等按类型不是提交、重置按钮等按 钮，则变为钮，则变为Tab切换切换 document对象的对象的 onKeyDown事件事件，它将接收，它将接收 页面中所有的键盘事件页面中所有的键盘事件 小结小结1 根据提供的素材页面，实现游戏中的人物移动效果。根据提供的素材页面，实现游戏中的人物移动效果。 提示：提示： 1、根据按下的方向键，