《css基本的表单验证技术.ppt》由会员分享，可在线阅读，更多相关《css基本的表单验证技术.ppt（23页珍藏版）》请在金锄头文库上搜索。
1、LOGO第五章第五章基本的表单验证技术基本的表单验证技术回 顾简述制作样式特效的大致步骤。简述制作改变按钮背景图片特效的大致步骤。简述层的显示/隐藏特效的实现思路。简述图片的显示/隐藏特效的的实现思路。本章任务演示示例1：具有验证功能的登录页面演示示例2：具有验证功能的注册页面 制作具有验证功能的登录页面 制作具有验证功能的注册页面本章目标会使用DOM模型的层次关系访问元素会使用表单事件和脚本函数实现表单验证会使用String对象和文本框控件常用属性和方法实现客户端验证为什么需要表单验证服务器IE脚本在客户端执行，减轻服务器端的压力客户端用户输入客户端用户输入客户端用户输入发送请求返回响应发送
2、请求返回响应发送请求返回响应表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不能为空，且只能包括字母、数字和下划线字符密码不能为空并且最少为6位，还要求两次输入的密码要一致表单验证的内容-2不能为空且包含字符和.只能二选一年月日不能为空，且不能超出其要求的范围表单验证的思路-1 如何编写脚本验证表单？1、获取表单元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）表单验证的思路-2常用的String对象使用 var 语句 var newstr = 这是我的字符串创建 String 对象 var newstr = new String(这是我
3、的字符串“)调用方法和属性 字符串对象.属性名 字符串对象.方法名( )表单验证的思路-3名名 称称说说 明明属性属性length获取字符串字符的个数获取字符串字符的个数方法方法indexOf(“子字符串子字符串”，起始位置，起始位置) 查找子字符串的位置查找子字符串的位置charAt(index)获获取取位位于于指指定定索索引引位位置置的的字符字符substring(index1,index2 )求子串求子串toLowerCase( )将字符串转换成小写将字符串转换成小写 toUpperCase( )将字符串转换成将字符串转换成大写大写 String对象常用的属性和方法语法：indexOf(
4、“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0表单验证的思路-4查看完整代码检查电子邮件email是否包含“”和”.” function checkEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=0) alert(电子邮件不能为空!); return false; if (strEmail.indexOf(,0)=-1) alert(电子邮件
5、格式不正确n必须包含符号！); return false; if (strEmail.indexOf(.,0)=-1) alert(电子邮件格式不正确n必须包含.符号！); return false; return true; 返回结果-1表示没找到“”字符获取表单元素的值表单的提交事件表单验证的思路-5-1查看完整代码表单验证的思路-5-2查看完整代码function checkUserName() /验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+)
6、 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-3查看完整代码 function passCheck() /验证密码var userpass = document.myform.txtPassword.value;if(userpas
7、s = )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()&passCheck( ) return true; else return false; 同时调用验证用户名和验证密码方法表单的提交事件触发表
8、单提交事件小结 1编写如下图所示，实现登录表单的验证功能练习代码练习答案文本框控件-1如何实现如下图所示，完善电子邮件的例子。用户单击时,邮箱的提示信息自动清除提示电子邮件格式不对输入的信息自动被选中并高亮显示文本框控件-2文本框对象的常用属性、方法、事件名名 称称说说 明明属性属性value设置或获取文本框的值设置或获取文本框的值方法方法focus( )获得焦点获得焦点select( )选中文本内容，突出显示输入区域选中文本内容，突出显示输入区域事件事件onFocus光标进入某个文本框光标进入某个文本框脚本运行脚本运行onBlur文本框文本框失去焦点脚本运行失去焦点脚本运行onKeyPres
9、s当一个键按下并释放时去触发一个事件当一个键按下并释放时去触发一个事件使用文本框对象的相关方法，实现选中效果文本框控件-3查看完整代码 . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将发送激活密码) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填清空文本框的内容修改文本框的颜色文本框获得焦点就调用方法clearText( )小结 2编写如下图所示，实现注册表单的验证功能练习代码练习答案
10、每个文本框非空密码和再次输入的密码必须相同年份必须是20打头日期必须在1到31之间常见错误-1function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按钮type=submit清空按钮type=reset常见错误-2function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; onsubmit不是提交按钮的事件总 结为什么需要表单验证？为什么需要表单验证？常用的表单验证主要包括哪些内容？常用的表单验证主要包括哪些内容？简述表单验证的大致思路？简述表单验证的大致思路？简要说明文本框对象的常用属性、方法和事件？简要说明文本框对象的常用属性、方法和事件？表单验证中常见的错误有哪些？表单验证中常见的错误有哪些？
