css基本的表单验证技术

,杭州职业技术学院,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,LOGO,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,杭州职业技术学院,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,第五章,基本的表单验证技术,回 顾,简述制作样式特效的大致步骤。,简述制作改变按钮背景图片特效的大致步骤。,简述层的显示,/,隐藏特效的实现思路。,简述图片的显示,/,隐藏特效的的实现思路。,本章任务,演示示例,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,是否包含“,”,和”,.”,function checkEmail()var strEmail=;,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;,返回结果,-1,表示没找到“,”,字符,获取表单元素的值,表单的提交事件,表单验证的思路,-5-1,查看完整代码,表单验证的思路,-5-2,查看完整代码,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 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(userpass=),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;,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,小结,1,编写如下图所示，实现登录表单的验证功能,练习代码,练习答案,文本框控件,-1,如何实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件,-2,文本框对象的常用属性、方法、事件,名 称,说 明,属性,value,设置或获取文本框的值,方法,focus(),获得焦点,select(),选中文本内容，突出显示输入区域,事件,onFocus,光标进入某个文本框脚本运行,onBlur,文本框失去焦点脚本运行,onKeyPress,当一个键按下并释放时去触发一个事件,使用文本框对象的相关方法，实现选中效果,文本框控件,-3,查看完整代码,.,function clearText(),if(document.myform.txtEmail.value=“,请输入真实的电子邮箱，我们将发送激活密码,),document.myform.txtEmail.value=;,document.myform.txtEmail.style.color=red;,*,必填,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法,clearText(),小结,2,编写如下图所示，实现注册表单的验证功能,练习代码,练习答案,每个文本框非空,密码和再次输入的密码必须相同,年份必须是,20,打头,日期必须在,1,到,31,之间,常见错误,-1,function validateform(),if(sNameCheck()&passCheck()&bdaycheck(),return true;,else,return false;,提交按钮,type=submit,清空按钮,type=reset,常见错误,-2,function validateform(),if(sNameCheck()&passCheck()&bdaycheck(),return true;,else,return false;,onsubmit,不是提交按钮的事件,总 结,为什么需要表单验证？,常用的表单验证主要包括哪些内容？,简述表单验证的大致思路？,简要说明文本框对象的常用属性、方法和事件？,表单验证中常见的错误有哪些？,