html表单验证技术.ppt

第九章 基本的表单验证技术 回顾 简述制作样式特效的大致步骤。 简述制作改变按钮背景图片特效的大致步骤。 简述层的显示/隐藏特效的实现思路。 简述图片的显示/隐藏特效的的实现思路。 本章任务 本章目标 会使用DOM模型的层次关系访问元素 会使用表单事件和脚本函数实现表单验证 会使用String对象和文本框控件常用属性和方法实现客户端验证 为什么需要表单验证 表单验证的内容-1 表单验证的内容-2 表单验证的思路-1 如何编写脚本验证表单？ 表单验证的思路-2 常用的String对象 使用 var 语句 var newstr = 这是我的字符串 创建 String 对象 var newstr = new String(这是我的字符串“) 调用方法和属性 字符串对象.属性名 字符串对象.方法名( ) 表单验证的思路-3 表单验证的思路-4 表单验证的思路-5-1 表单验证的思路-5-2 表单验证的思路-5-3 表单验证的思路-5-4 小结 1 编写如下图所示，实现登录表单的验证功能 文本框控件-1 如何实现如下图所示，完善电子邮件的例子。 文本框控件-2 文本框对象的常用属性、方法、事件 文本框控件-3 小结 2 编写如下图所示，实现注册表单的验证功能 常见错误-1 常见错误-2 总结 为什么需要表单验证？ 常用的表单验证主要包括哪些内容？ 简述表单验证的大致思路？ 简要说明文本框对象的常用属性、方法和事件？ 表单验证中常见的错误有哪些？ HandsOn HandsOn * Hands-On实训教程系列 Hands-On实训教程系列 演示示例1：具有验证功能的登录页面 演示示例2：具有验证功能的注册页面 制作具有验证功能的登录页面 制作具有验证功能的注册页面 服务器 IE 脚本在客户端执行，减轻服务器端的压力 客户端 用户输入 客户端 用户输入 …… 客户端 用户输入 …… 发送请求 返回响应 发送请求 返回响应 发送请求 返回响应 不能为空且不能有数字 不能为空且不能有数字 不能为空，且只能包括字母、数字和下划线字符 密码不能为空并且最少为6位，还要求两次输入的密码要一致 不能为空且包含字符@和. 只能二选一 年月日不能为空，且不能超出其要求的范围 1、获取表单元素的值（String类型），然后进行判断 2、触发表单（FORM）的提交事件（onSubmit） 将字符串转换成大写 toUpperCase( ) 将字符串转换成小写 toLowerCase( ) 求子串 substring(index1,index2 ) 获取位于指定索引位置的字符 charAt(index) 查找子字符串的位置 indexOf(“子字符串”，起始位置) 方法 获取字符串字符的个数 length 属性 说 明 名 称 String对象常用的属性和方法 语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置；如果没找到，返回 －1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); //返回结果为2，起始位置是0 查看完整代码 检查电子邮件email 是否包含“@”和”.” SCRIPT LANGUAGE = JavaScript function checkEmail( ) { var strEmail=document.myform.txtEmail.value; if (strEmail.length==0) { alert(电子邮件不能为空!); return false; } if (strEmail.indexOf(@,0)==-1) { alert(电子邮件格式不正确\n必须包含@符号！); return false; } if (strEmail.indexOf(.,0)==