JS常用表单验证技术说课.ppt

讲师：唐明 第四章 常用表单验证技术 * 演示示例1：具有验证功能的登录页面 演示示例2：具有验证功能的注册页面 制作具有验证功能的登录页面 制作具有验证功能的注册页面 会使用DOM模型的层次关系访问表单及表单元素 会使用表单的提交事件和表单数据有效性验证函数实现表单验证 会使用String对象和文本框元素常用属性和方法实现客户端验证 * * 服务器 IE 脚本在客户端执行，减轻服务器端的压力 客户端 用户输入 客户端 用户输入 …… 客户端 用户输入 …… 发送请求 返回响应 发送请求 返回响应 发送请求 返回响应 * 不能为空且不能有数字 不能为空且不能有数字 不能为空，且只能包括字母、数字和下划线字符 密码不能为空并且最少为6位，还要求两次输入的密码要一致 * 不能为空且包含字符@和. 只能二选一 年月日不能为空，且不能超出其要求的范围 如何编写脚本验证表单？ * 1、获取表单元素的值（String类型），然后进行判断 2、触发表单（FORM）的提交事件（onSubmit） 常用的String对象 使用 var 语句 var newstr = 这是我的字符串“; 创建 String 对象 var newstr = new String(这是我的字符串“); 调用方法和属性 字符串对象.属性名 字符串对象.方法名( ) * 名 称 说 明 属性 length 获取字符串字符的个数 方法 indexOf(string[,number]) 查找子字符串的位置 charAt(number) 获取位于指定索引位置的字符 substring(number,number ) 取子串 toLowerCase() 将字符串转换成小写 toUpperCase() 将字符串转换成大写 * String对象常用的属性和方法 查看完整代码 * 查看完整代码 检查电子邮件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表示没找到“@”字符 获取表单元素的值 表单的提交事件 * 查看完整代码 * 查看完整代码 SCRIPT language = JavaScript function checkUserName(){ //验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0){ for(i=0;ifname.length;i++){ var ftext = fname.substring(i,i+1); if(ftext 9 || ftext 0){ alert(名字中包含数字 \n+请删除名字中的数字和特殊字符); return false } } } else{ alert(请输入“名字”文本框); document.myform.txtUser.focus(); return false } return true;