登录注册验证(JavaScript)-PHP教学课件5

,Click to edit Master,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,PHP+MySQL,动态网页技术教程,主编：王彦辉,5.1,项目导引：用户注册验证,大家在网站登录注册时是不是有这样的体会？,如果有必填项而没有填写，网站会提示我们此项目不能为空；,如果设置密码的长度不够，网站会提示我们密码长度不够；,如果注册密码与确认密码不一致，网站会提示我们密码不一致；,如果信息格式输入不正确（如邮箱地址、手机号码），网站会提示我们格式不正确。,那么这些功能是如何实现的呢？,通过,JavaScript,客户端脚本可以对用户输入的数据进行检查,5.2,项目分析,JavaScript,脚本语言是一种面向浏览器的网页脚本编程语言，,JavaScript,脚本在客户端浏览器执行。,用户注册过程中的主要验证包括：,用户名、密码和邮箱地址等内容的非空验证；,密码长度为,6-20,个字符，且是英文字母、数字及符号的组合；,注册密码与确认密码是否一致；,电子邮箱格式是否正确。,5.3,技术准备,5.3.1 JavaScript,基础,JavaScript,语句的基本语法规则与,PHP,语法类似，每条语句以,“,；,”,为结束符，注释语句有单行注释（,/,）和多行注释（,/*,*/,）两种，变量、函数名以及关键词都是区分大小写的。,1,在网页中加入,JavaScript,（,1,）直接嵌入,HTML,文档,（,2,）引用方式,例,5-1,5.3,技术准备,5.3.1 JavaScript,基础,2,数据类型,数据类型,数据类型名称,示例,number,数值类型,整数：,23,、,023,、,0 x23,浮点数,:,：,2.56,string,字符串类型,字符串,、字符串,boolean,布尔类型,True,、,false,object,对象类型,Date,对象、,Math,对象、,Window,对象,null,空类型,Null,undefined,未定义类型,Txtname,、,tmp,、,txtstr,5.3,技术准备,5.3.1 JavaScript,基础,3,变量,变量名是一种标识符，由字母、数字、下划线（,_,）或美元符号（,$,）构成的字符序列组成，但首字符不能是数字，也不能包含空格、,+,、,-,等特殊字符。,JavaScript,中通过,var,关键字来声明变量,var,变量名,=,初值,，变量名,=,初值,，,例,5-2,5.3,技术准备,5.3.1 JavaScript,基础,4,运算符与表达式,JavaScript,中运算符与表达式与,php,基本相同,JavaScript,中字符串连接运算符与,php,不同,，,JavaScript,中把“,+”,或“,+=”,作为字符串连接运算符。,例,5-3,5.3,技术准备,5.3.2 JavaScript,流程语句,1,条件语句（,if.else,）,if(),else,例,5-4,5.3,技术准备,5.3.2 JavaScript,流程语句,2,循环语句,（,1,）,while,语句,其语法格式如下所示：,while(),（,2,）,do.while,语句：,其语法格式如下所示：,do,while(),5.3,技术准备,5.3.2 JavaScript,流程语句,2,循环语句,（,3,）,for,语句：,其语法格式如下所示：,for(,初值表达式，循环判定表达式，更新表达式,),例,5-5,、例,5-6,、例,5-7,5.3,技术准备,5.3.3,浏览器对象,JavaScript,是一种基于对象（,Object,）的编程语言，可以使用内置对象、浏览器对象和自定义对象。,JavaScript,语言提供的内置对象主要包括：数学对象（,Math,）、日期对象（,Date,）、字符串对象（,String,）和数组对象（,Array,）等,浏览器对象（,BOM,）用于访问与操纵浏览器窗口,窗口对象（,window,）,文档对象（,document,）,地址对象（,location,）,浏览器对象（,navigator,）,屏幕对象（,screen,）,历史对象（,history,）。,5.3,技术准备,5.3.3,浏览器对象,1,window,对象,window,对象表示整个浏览器窗口，通过对象的方法我们可以定制、打开和关闭浏览器窗口。其常用方法如表所示。,方法,说明,alert(,信息字串,),弹出警告信息,confirm(,信息字串,),显示确认信息对话框,prompt(,提示字串,，默认值,),显示提示信息，并提供可输入的字段,open(URL,，窗口名称,，窗口规格,),用来打开一个新窗口，其中，接受的参数分别为新窗口的,URL,、新窗口的名称、新建窗口的大小和外观特性。,close(),关闭浏览器窗口,moveBy,(,水平点数，垂直点数,),将窗口移动指定位移量。以像素为单位,moveTo(x,坐标，,y,坐标,),将窗口移到指定位置。以像素为单位,resizeBy,(,水平点数，垂直点数,),按照给定的位移量重新设定窗口大小。以像素为单位,resizeTo,(,宽度，高度,),将窗口设置为指定的大小。以像素为单位,setInterval,(,表达式，毫秒,),设置一个延器，使每隔指定毫秒后周期性地执行表达式。该方法返回定时器对象。,setTimeout,(,表达式，毫秒,),设置一个定时器，使在指定毫秒后自动执行一次表达式。该方法返回定时器对象。,clearInterval,(,定时器对象,),取消由,clearInterval,(),设置的定时操作,clearTimeout,(,定时器对象,),取消由,clearTimeout,(),设置的延时操作,5.3,技术准备,5.3.3,浏览器对象,1,window,对象,（,1,）使用对话框,使用,window,对象的,alert(),、,confirm(),和,prompt(),方法，可以弹出警示、确认和提示对话框。,例,5-8,、例,5-9,（,2,）打开和关闭窗口,使用,window,对象的,open(),、,close(),方法可以打开、关闭窗口。,例,5-10,（,3,）使用定时器,使用,window,对象的,setInterval,(),方法，可以实现让一段程序每隔一段时间就执行一次的定时机制。,例,5-11,5.3,技术准备,5.3.3,浏览器对象,2,Document,对象,Document,对象表示在浏览器窗口中显示的页面文档。除了提供文档整体信息的属性外，,Document,对象还有很多的重要属性，这些属性提供文档内容信息。如，,forms,集合属性存放的,Form,对象是文档中的所有表单，,images,集合属性和,links,集合属性存放的是文档中的所有图像和超链接对象。,（,1,）表单的访问,如下面的,HTML,页面：,用户,:,引用该文档中的表单可以使用,document.formslogin,或,document.login,。,5.3,技术准备,5.3.3,浏览器对象,2,Document,对象,（,2,）表单元素的访问,设置了一个表单元素的,name,属性，就创建了一个引用该元素的,Form,对象的新属性，这个属性的名字就是,name,属性的值。通过此属性能够从表单中读取用户输入的数据。,若访问上例中的用户元素，则需为用户元素添加,name,属性，如,，则访问用户元素代码可写为：,document.login.username,例,5-12,、例,5-13,5.3,技术准备,5.3.3,浏览器对象,3,location,对象,location,对象的主要作用是分析和设置页面的,URL,地址。,通过设置,location.href,属性可以跳转到新的页面，如：,location.href,=,http:/,。,例,5-14,4,history,对象,history,对象可以用来访问浏览器窗口已浏览过的历史页面。,例,5-15,5.3,技术准备,5.3.4 JavaScript,事件,JavaScript,是基于对象的语言。而事件编程是,JavaScript,中最吸引人的地方，因为它提供了一个平台，让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。,1,事件的基本概念,通常鼠标或热键的动作我们称之为事件（,event,），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（,event driver,）。而对事件进行处理的程序或函数，我们称之为事件处理程序。,事件绑定：是指将一个函数与某个,HTML,元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行。,5.3,技术准备,5.3.4 JavaScript,事件,2,静态绑定事件,是指将处理事件的程序代码直接指定为,HTML,元素的事件属性值。语法格式为,，如：,问侯先生,函数调用形式：如果触发事件时要执行的语句比较多，则可以将代码放到函数中，然后在事件属性中写入函数调用的语句，如：,问侯小姐,例,5-16,5.3,技术准备,5.3.4 JavaScript,事件,3,事件的类型,（,1,）鼠标事件,事件,说明,onclick,单击鼠标左键时触发此事件,onmouseover,鼠标指针移到另一个元素上时触发此事件,onmouseout,鼠标指针在某个元素上，移出该元素边界时触发此事件,5.3,技术准备,5.3.4 JavaScript,事件,3,事件的类型,（,2,）表单事件,例,5-17,、例,5-18,事件,说明,onblur,当控件失去焦点时触发此事件,onchange,当控件失去焦点并且元素的内容发生改变时触发此事件,onfocus,当控件获得焦点时触发此事件,onreset,当用户单击“重置”按钮（即,）时触发,onselect,当选择了文本框中的一个或多个字符时触发,onsubmit,当用户单击“提交”按钮（即,）时触发,5.3,技术准备,5.3.5,正则表达式,1,正则表达式介绍,正则表达式（,regular expression,）描述了一种字符串匹配的模式。元字符就是指那些在正则表达式中具有特殊含义的专用字符，可以用来指定各种匹配关系。,在程序语言中引入正则表达式，可以测试字符串是否匹配某个模式，从而实现数据格式的有效性验证。例如，对用户在,Web,表单中输入的电子邮件地址格式进行确认（,必须有,和,.,字符,），这称为数据验证。,5.3,技术准备,5.3.5,正则表达式,2,正则表达式的语法,3,RegExp,对象,JavaScript,提供了一个,RegExp,对象来完成有关正则表达式的操作和功能，每一条正则表达式模式对应一个,RegExp,实例。,JavaScript,使用,RegExp,对象封装与正则表达式相关的功能和操作，每一个该对象的实例对应着一条正则表达式。和其他对象一样，在使用之前必须取得其引用或新建一个对象实例。,例,5-19,、,例,5-20,5.4,项目实施,在用户注册页面中，对用户名、密码和邮箱地址的必填验证就是检查输入表单元素的值是否为空；对于登录密码与确认密码一致性验证就是判断两个输入表单元素的值是否相等；而用户注册页面数据验证的难点在于对用户名、密码和邮箱地址的格式进行合法性验证，通常这种对复杂格式数据的合法性验证通常借助正则表达式实现。我们对用户注册过程中数据的合法性验证遵循由易到难，循序渐进的过程进行。即：第一步，实现必填字段的验证；第二步，实现复杂格式数据的验证。,5.4,项目实施,1,制作注册页面,2,非空性验证程序,3,复杂格式数据的验证,用户注册时除了非空验证之外，通常的验证还包括：,注册帐号只能以字母开头，长度在,6-18,之间，只能包含字符、数字和下划线；,登录密码只能是,6-20,位英文字母或者数字建议采用易记的英文数字组合；,邮