PHP网站开发项目式教程（微课版）（第2版）任务5 实现163邮箱注册功能 .pdf

任务5实现163邮箱注册功能

在实现邮箱注册功能的过程中，需要讲解的相关知识点包括:

使用PHP的图处理函数生成图片验证码、图片验证码在页面中

的插入与刷新、实现图片验证码的验证及表单数据的回填功能、

使用Session机制在网站不同页面间传递数据、创建与操作MySQL

数据库、PHP中访问MySQL数据库的常用方法等。

本任务需要完成以下6个任务。

(1)设计注册账号的表单界面。

(2)对用户注册的表单数据进行合法性验证。

(3)创建图片验证码。

(4)将图片验证码应用在页面中并实现其刷新和验证功能。

(5)创建MySQL数据库emai1和数据表usermsgo

(6)使用AJAX对用户注册的邮箱地址进行查重，确定无重复后

允许注册保存。

■1

A需要解决的核心问题

•如何设计验证码的“看不清楚？换一张”文本的样式？

•如何定义进行手机号合法性验证时使用的正则表达式？

这里的简单注册功能是指不使用验证码进行验证，也不会把

注册数据保存到数据库中，只是设计注册界面，完成界面中的数

据验证并将数据提交到服务器端进行简单输出。

5.1.1眸注册界面设计

创建页面文件zhuce.html,设计图5T所示的163邮箱注册界

面。

完成邮箱注册时，将表单标签＜form＞中的method属性的取值

设置为post,因此获取表单元素数据时使用的系统数组是$_P0STo

*邮件地址6163.ccm

6~18个字符,包括字母、数字、下划,字母开头、字母或数字增尾

*密码

6~16个字符’区分大小写

*确认密码

请再次输入g

手机号码

密码遗右或被盗时，可通过手机短信取回密码

*验证码代硬虹项［:

请输入图片中的字符着不―？换一张

|立即注肪|

图5-1163邮箱注册界面

1.BMW

B

整个页面布局使用了上下排列的3个div,分别使用类选择

符.divshang、.divzhong和.divxia定义样式,3个div的排列

关系如图5-2所示。

class类选择符q,i乂对底g

class类选择符q.i.YAhQ、ng

class类选择符@少如

图5-2邮箱注册页面布局使用的div结构

2a期个祝w的播就

类选择符.divshang：宽度为965px,高度为55px,填充为0,

上下边距为0,左右边距为auto,背景图为wbg_shang.jpg。

类选择符.divzhong：宽度为965px,高度为auto,上填充

为30px,其他填充为0,上下边距为0,左右边距为auto,背景图

片为wbg_zhong.jpgo

类选择符.divxia：宽度为965px,高度为15px,填充为0,

上下边距为0,左右边距为auto,背景图片为wbg_xia.jpg。

期。襄籍役文掌棒就要求

在元素〈divclass=divzhong＞内部，使用6行2列的表格

排列表单元素和各种文字内容，表格要求如下。

(1)表格宽度为600px,在元素〈divclass=divzhong＞内部

居中对齐，单元格边距和单元格间距都是0。

(2)表格左侧列样式使用类选择符.tdl定义，宽度为150px,高

度为60px,文本字号为12pt,文本在水平方向靠右对齐，在垂直

方向顶端对齐。

(3)表格右侧列样式使用类选择符.td2定义，宽度为450px,文

本字号为10pt,文本在垂直方向顶端对齐。

49襄单元褰要凌

(1)“邮箱地址”文本框的name和id属性取值均为emailaddr,

使用ID选择符ttemailaddr定义样式。

(2)“密码”输入框的name和id属性取值均为psdl,使用ID选

择符#psdl定义样式。

(3)“确认密码”输入框的name和id属性取值均为psd2,使用

I