JavaScript第五课说课.ppt

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