《javaScript-实现基本的表单验证技术.ppt》由会员分享，可在线阅读，更多相关《javaScript-实现基本的表单验证技术.ppt（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2预习检查预习检查u表单验证一般包括哪些方面内容？uString对象有哪些常用的属性和方法？u文本框对象有哪些常用的属性、方法和事件？3为什么需要表单验证为什么需要表单验证服务器IE脚本在客户端执行，减轻服务器端的压力脚本在客户端执行，减轻服务器端的压力客户端客户端用户输入用户输入客户端客户端用户输入用户输入客户端客户端用户输入用户输入发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应4表单验证的内容表单验证的内容-1-1不能为空且不能为空且不能有数字不能有数字不能为空且不能为空且不能有数字不能有数字不能为空，且只不能为空，且只能包括字母、数能包括
2、字母、数字和下划线字符字和下划线字符密码不能为空并且最密码不能为空并且最少为少为6位，还要求两位，还要求两次输入的密码要一致次输入的密码要一致5表单验证的内容表单验证的内容-2-2不能为空且包含不能为空且包含字符字符和和.年月日不能年月日不能为空，且不为空，且不能超出其要能超出其要求的范围求的范围6表单验证的思路表单验证的思路-1-1 如何编写脚本验证表单？1、获取表单元素的值（、获取表单元素的值（String类型），然后进行判断类型），然后进行判断2、触发、触发表单表单（FORM）的提交事件的提交事件（onSubmit）7表单验证的思路表单验证的思路-2-2u常用的String对象 使用 v
3、ar 语句 var newstr = 这是我的字符串 创建 String 对象 var newstr = new String(这是我的字符串“) 调用方法和属性 字符串对象.属性名 字符串对象.方法名( )8表单验证的思路表单验证的思路-3-3mString对象常用的属性和方法语法：语法：indexOf(“查找的子字符串查找的子字符串”，查找的起始位置，查找的起始位置)返回子字符串所在的位置；如果没找到，返回返回子字符串所在的位置；如果没找到，返回 1例如：例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回结果为返回结果为2，起始位置是，起始
4、位置是09表单验证的思路表单验证的思路-4-4检查电子邮件检查电子邮件email是否包含是否包含“”和和”.” 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
5、) alert(电子邮件格式不正确电子邮件格式不正确n必须包含必须包含.符号！符号！); return false; return true; 返回结果返回结果-1表示表示没找到没找到“”字符字符获取表单元素的值获取表单元素的值表单的提交事件表单的提交事件10表单验证的思路表单验证的思路-5-1-5-111表单验证的思路表单验证的思路-5-2-5-2function checkUserName() /验证用户名验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;
6、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; 验证用户名不验证用户名不能包含数字能包含数字获取表单元素的值获取表单元素的值12表单验证的思路表单验证的思路-5-3-5-3 function passCheck() /验证密码验
7、证密码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位位获取表单元素的值获取表单元素的值13表单验证的思路表单验证的思路-5-4-5-4 functi
8、on validateform() if(checkUserName()&passCheck( ) return true; else return false; 同时调用验证用户同时调用验证用户名和验证密码方法名和验证密码方法表单的提交事件表单的提交事件触发表单提交事件触发表单提交事件14小结小结 1 1编写如下图所示，实现登录表单的验证功能15文本框控件文本框控件-1-1如何实现如下图所示，完善电子邮件的例子。用户单击时用户单击时,邮邮箱的提示信息箱的提示信息自动清除自动清除提示电子邮提示电子邮件格式不对件格式不对输入的信息输入的信息自动被选中自动被选中并高亮显示并高亮显示16文本框控件文
9、本框控件-2-2u文本框对象的常用属性、方法、事件使用文本框对象的相关方法，实现选中效果使用文本框对象的相关方法，实现选中效果17文本框控件文本框控件-3-3 . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将请输入真实的电子邮箱，我们将 发送激活密码发送激活密码) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填必填清空文本框的内容清空文本框的内容修改文本框的颜色修改文本框的颜色文本框获
10、得焦点就调文本框获得焦点就调用方法用方法clearText( )18小结小结 2 2编写如下图所示，实现注册表单的验证功能每个文本每个文本框非空框非空密码和再次输入密码和再次输入的密码必须相同的密码必须相同年份必须年份必须是是20打头打头日期必须在日期必须在1到到31之间之间19常见错误常见错误-1-1function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按钮提交按钮type=submit清空按钮清空按钮type=reset20常见错误常见错误-2-
11、2function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; onsubmit不是提不是提交按钮的事件交按钮的事件21总结总结主要包括哪些内容？u简述表单验证的大致思路？u简要说明文本框对象的常用属性、方法和事件？u表单验证中常见的错误有哪些？22回顾回顾u表单验证一般包括那些内容?u表单验证的实现步骤。u文本框控件有哪些常用的属性、方法、事件？23如何使用图片代替提交按钮如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮
12、变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？使用图片的单击事件。使用图片的单击事件。onClick=checkForm( )24如何使用图片代替提交按钮如何使用图片代替提交按钮根据上述分析和提供的素材页面来实现表单验证。根据上述分析和提供的素材页面来实现表单验证。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( ); 检验是否为空检验是否为空单击事件，调用
13、单击事件，调用表单验证函数表单验证函数25如何使用图片代替提交按钮如何使用图片代替提交按钮能进行表单验证，但即使是正确填写了表单，也能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击不能提交页面（点击“注册注册”没反映）。没反映）。26如何使用图片代替提交按钮如何使用图片代替提交按钮因为图片不具备因为图片不具备“提交提交”按钮的提交功能，所以需按钮的提交功能，所以需要人工调用提交方法要人工调用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 如果表单输入合法，则提交表单如果表单输入合法，则提交表单27总结总结u使用图片代替“提交按钮”时，如何实现表单验证功能？总结总结u1.熟练表单验证u2.事件：onsubmit=” onchange=“” onblur=”u onfocus=“” u文本框：.focus()获得焦点 .select()选中文本高亮显示