accp4.0s2-accp5.0y2转换课程理论部分教学tp3v1

1、第三章表单验证及相关特效回顾简述制作样式特效的大致步骤。简述制作改变按钮背景图片特效的大致步骤。简述层的显示/隐藏特效的实现思路。简述图片的显示/隐藏特效的的实现思路。2预习检查表单验证一般包括哪些方面内容？String对象有哪些常用的属性和方法？文本框对象有哪些常用的属性、方法和事件？3本章任务4演示示例1：具有验证功能的登录页面演示示例2：具有验证功能的注册页面 制作具有验证功能的登录页面 制作具有验证功能的注册页面演示示例1：回车切换输入的效果演示示例2：即时提示错误的输入框 制作回车切换输入的效果制作即时提示错误的输入框本章目标会使用DOM模型的层次关系访问元素会使用表单事件和脚本函数

2、实现表单验证会使用String对象和文本框控件常用属性和方法实现客户端验证会使用DIV的innerHTML或innerText动态显示内容 5为什么需要表单验证6服务器IE脚本在客户端执行，减轻服务器端的压力客户端用户输入客户端用户输入客户端用户输入发送请求返回响应发送请求返回响应发送请求返回响应表单验证的内容-17不能为空且不能有数字不能为空且不能有数字不能为空，且只能包括字母、数字和下划线字符密码不能为空并且最少为6位，还要求两次输入的密码要一致表单验证的内容-28不能为空且包含字符和.只能二选一年月日不能为空，且不能超出其要求的范围表单验证的思路-1 如何编写脚本验证表单？91、获取表单

3、元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）表单验证的思路-2常用的String对象使用 var 语句 var newstr = 这是我的字符串创建 String 对象 var newstr = new String(这是我的字符串“)调用方法和属性 字符串对象.属性名 字符串对象.方法名( )10表单验证的思路-3名 称说 明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2 )求子串toLow

4、erCase( )将字符串转换成小写 toUpperCase( )将字符串转换成大写 11String对象常用的属性和方法语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0表单验证的思路-412查看完整代码检查电子邮件email是否包含“”和”.” function checkEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=

5、0) alert(电子邮件不能为空!); return false; if (strEmail.indexOf(,0)=-1) alert(电子邮件格式不正确n必须包含符号！); return false; if (strEmail.indexOf(.,0)=-1) alert(电子邮件格式不正确n必须包含.符号！); return false; return true; 返回结果-1表示没找到“”字符获取表单元素的值表单的提交事件表单验证的思路-5-113查看完整代码表单验证的思路-5-214查看完整代码function checkUserName() /验证用户名 var fname =

6、document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含数字 n+请删除名字中的数字和特殊字符); return false else alert(请输入“名字”文本框); document.myform.txtUser.focus(); return false return true; 验证用户名不能包含数字获取表单元素的值表单验证的思路-5-315查看完整代码 funct

7、ion passCheck() /验证密码var userpass = document.myform.txtPassword.value;if(userpass = )alert(未输入密码 n + 请输入密码);document.myform.txtPassword.focus();return false; if(userpass.length 6)alert(密码必须多于或等于 6 个字符。n);return false; return true; 验证密码不少于6位获取表单元素的值表单验证的思路-5-416查看完整代码 function validateform() if(check

8、UserName()&passCheck( ) return true; else return false; 同时调用验证用户名和验证密码方法表单的提交事件触发表单提交事件小结 1编写如下图所示，实现登录表单的验证功能17练习代码练习答案文本框控件-1如何实现如下图所示，完善电子邮件的例子。18用户单击时,邮箱的提示信息自动清除提示电子邮件格式不对输入的信息自动被选中并高亮显示文本框控件-2文本框对象的常用属性、方法、事件名 称说 明属性value设置或获取文本框的值方法focus( )获得焦点select( )选中文本内容，突出显示输入区域事件onFocus光标进入某个文本框脚本运行onB

9、lur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件19使用文本框对象的相关方法，实现选中效果文本框控件-320查看完整代码 . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将 发送激活密码) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填清空文本框的内容修改文本框的颜色文本框获得焦点就调用方法clearText( )小结 2编写如下图所示，实现注册表单的验

10、证功能21练习代码练习答案每个文本框非空密码和再次输入的密码必须相同年份必须是20打头日期必须在1到31之间制作回车切换输入的效果22输入完毕后回车，默认会提交表单。 页面效果如何制作回车Tab切换效果？ 页面效果制作回车切换输入的效果231、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键ASCII码13，若是则将 输入改为Tab键ASCII码9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 查看源代码键盘按下，调用实现Tab效果的函数修改回车键为Tab键Event事件对象包含输入键信息制作回

11、车切换输入的效果24上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？ 制作回车切换输入的效果25通过给document对象添加键盘事件。 function changeFocus( ) if (event.keyCode=13 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换document对象的onKeyDown事件

12、，它将接收页面中所有的键盘事件查看源代码小结126根据提供的素材页面，实现游戏中的人物移动效果。提示：1、根据按下的方向键，改变层的Left或Top坐标 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向键的ASCII码： 向上键38，向下箭40 向左键37， 向右键393、添加键盘事件：document.onKeyDown= move;练习答案 练习素材制作即时提示错误的特效27如何制作即时提示错误的特效？页面效果制作即时提示错误的特效28使用DIV层的内容动

13、态改变。 在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息制作即时提示错误的特效29演示实现步骤：1、在登录文本框后插入DIV标签loginError （即没有样式的DIV层）2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行 演示示例4：演示素材制作即时提示错误的特效30演示实现步骤：3、添加文本框失去焦点的事件函数： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.l

14、oginName.value; if (strName.length = 0) myDiv.innerHTML=用户名不能为空; return; 查看源代码如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息获取插入的DIV对象小结231完善”密码“和”电子邮件“的错误提示功能。提示：1、密码和电子邮件文本框后各添加一个DIV标签2、修改DIV的显示样式为inline3、给各个文本框添加失去焦点onBlur的事件函数练习答案 练习素材 常见错误-132function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按钮typ