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