《javascript表单和事件..ppt》由会员分享，可在线阅读，更多相关《javascript表单和事件..ppt（53页珍藏版）》请在金锄头文库上搜索。
1、第九章 表单和事件处理,教师：乔方辉,本章目标,InnerHTML的用法 表单的综合验证 键盘的使用,本章任务,演示示例2：表单的综合验证,演示示例3：用户输入信息的适时提示,用户输入信息的适时提示 表单的综合验证,制作即时提示错误的特效,innerHTML,innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。 比如说我一个div层里本来没有值，我触发一个事件后要显示值，那么就能够使用innerHTML属性了，其实innerHTML属性除了能控制层以外，还能控制窗口内容的所有元素,innerHTML,innerHTML是html标签的属性，成对出现的标签都有这么个属性，是
2、开始标签和结束标签之间的字符，不包括标签本身， innerHTML 设置或获取位于对象起始和结束标签内的 HTML 比如 aaaaaaa bbbbbbbbbb 那么pp.innerHTM的内容就是： aaaaaaabbbbbbbbbb ss.innerHTML的内容就是： bbbbbbbbbb,制作即时提示错误的特效,使用DIV层的内容动态改变。,在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息,制作即时提示错误的特效,演示实现步骤： 1、在登录文本框后插入DIV标签loginError （即没有样式的DIV层） 2、修改源代码，设置DIV的显示方式为inline，即和文本
3、框在同一行 ,制作即时提示错误的特效,function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为空; return; ,如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息,获取插入的DIV对象,小结2,完善”密码“和”电子邮件“
4、的错误提示功能。,提示： 1、密码和电子邮件文本框后各添加一个DIV标签 2、修改DIV的显示样式为inline 3、给各个文本框添加失去焦点onBlur的事件函数,制作内容动态改变的层特效,如何制作内容动态改变的特效(选择不同的计算方式)？,总结：有哪些方法可以实现动态改变页面内容？,方法1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”； 方法2： 当动态显示的内容较多，并相对固定时，则预先制作好DIV内容， 然后使用myDiv.style.display=“none/block”；,制作内容动态改变的层特效,1、预先插入两个DIV标签，分别放置不同计算方
5、式 显示的内容：,DIV1 按面积计算显示的内容,DIV2 按贷款总额计算显示的内容, function InitDIV( ) document.getElementById(DIV1).style.display=none; ,制作内容动态改变的层特效,2、添加函数，初始化DIV1不显示，默认按贷款总额计算：,隐藏DIV1,页面加载时调用,function displayDIV( ) if (document.myform. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; docume
6、nt.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; ,3、添加函数，根据“计算方式”的选择，隐藏/显示对应DIV层：,根据单选按钮的值，隐藏/显示对应的层,按钮的单击事件,表单验证的思路-5-1,表单的综合验证,注意：我们点提交按钮时实际上是表单的提交。所以触发的是表单的提交事件（onSubmit） . 发现，即使用户输入的不符合要求仍然能提交,注意
7、,要注意的是，千万不能这样写写成 因为check()不通过后会返回false，因为onsubmit属性就像是这个html对象的一个方法名，默认返回true，所以还是相当于验证通过 记得对表单验证一定要写成这样, . 语法： onSubmit=”return 返回布尔型的函数”,onSubmit,onSubmit返回false时，不往Server传送数据，即表单不提交 如果表单没有通过验证，在函数中return false就会阻止表单的提交。 如果表单通过验证，在函数中return TRUE表单就会提交。,思路,1、每个判断用户输入的函数，都需要有返回值，当用户输入的信息不符合要求时就返回fal
8、se，符合要求时就返回true,2、调用判断函数时，该在什么地方调用还是什么地方,最后写一个总的函数，共onsubmit（）调用,表单验证的思路-5-2, function checkUserName() /验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;i 0) alert(名字中包含数字 n+请删除名字中的数字和特殊字符); return false else alert(请输入“名字”文本框); document.myform.txtUser.focus(); return fa
9、lse return true; ,验证用户名不能包含数字,获取表单元素的值,表单验证的思路-5-3, function passCheck() /验证密码 var userpass = document.myform.txtPassword.value; if(userpass = ) alert(未输入密码 n + 请输入密码); document.myform.txtPassword.focus(); return false; if(userpass.length ,验证密码不少于6位,获取表单元素的值,表单验证的思路-5-4, function validateform() if(c
10、heckUserName() ,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,为什么要这样调用函数,为什么要有返回值？,小结 2,编写如下图所示，实现注册表单的验证功能,年份必须是20打头,日期必须在1到31之间,按钮,正则表达式,身份证号，邮箱地址，邮编等等都有一定的格式，那么来制定格式的公式就叫正则表达式。 正则表达式是一门独立的课程，对于咱们不需要花时间去学习，用到时去网站上找想对应的正则表达式,正则表达式,正则表达式,如何使用图片代替提交按钮,为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？,使用图片的单击事件。onClick=checkFo
11、rm( ),如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！); document.myform.txtUserName.focus( ); ,检验是否为空,单击事件，调用表单验证函数,如何使用图片代替提交按钮,能进行表单验证，但即使是正确填写了表单，也 不能提交页面（点击“注册”没反映）。,如何使用图片代替提交按钮,因为图片不具备“提交”按钮的提交功能，所以需 要人工调用提交方法 submit( )
12、 。, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！); document.myform.txtUserName.focus( ); else document.myform.submit( ); ,如果表单输入合法，则提交表单,如何使用图片代替提交按钮,如何使用图片代替提交按钮,如何使用图片代替提交按钮,制作回车切换输入的效果,输入完毕后回车，默认会提交表单 如何制作回车Tab切换效果？,制作回车切换输入的效果,1、 使用键盘输入事件onKeyDown事件 2、 检查
13、输入是否是回车键ASCII码13，若是则将 输入改为Tab键ASCII码9, function changeFocus( ) if (event.keyCode=13) event.keyCode=9; ,键盘按下，调用实 现Tab效果的函数,修改回车键为Tab键,Event事件对象包含输入键信息,制作回车切换输入的效果,上述注册页面中，需要给每个文本框添加键盘按 下事件，有没有更简单的办法？, ,制作回车切换输入的效果,通过给document对象添加键盘事件。, function changeFocus( ) if (event.keyCode=13 ,如果按键是回车键，并且控件类型不是提交
14、、重置按钮等按钮，则变为Tab切换,document对象的onKeyDown事件，它将接收页面中所有的键盘事件,小结1,根据提供的素材页面，实现游戏中的人物移动效果。,提示： 1、根据按下的方向键，改变层的Left或Top坐标 document.getElementById(man).style. Left document.getElementById(man).style. Top 2、方向键的ASCII码： 向上键38，向下箭40 向左键37， 向右键39 3、添加键盘事件：document.onKeyDown= move;,键盘控制层的移动,键值表,如何制作回车提交表单,本章总结,InnerHTML的用法 表单的综合验证 键盘的使用,
