网页设计.docx

网页设计.docx

《网页设计.docx》由会员分享，可在线阅读，更多相关《网页设计.docx（14页珍藏版）》请在冰点文库上搜索。

网页设计

从这个实例开始将要以实例75中创建的数据库及数据连接为基础，开发一家玩具公司的电子商务平台。

本实例将介绍如何在用户注册页面中验证用户注册信息。

效果说明用户通过“uselogin.aspx”注册成为公司的客户，如图76-1所示，当用户提交注册信息时，再由它对注册信息进行有效验证，如76-2所示，从而对公司的用户注册信息进行管理。

创作构思通过ASP.NET验证服务器控件，可以对用户的注册信息进行验证。

本实例需要用到实例75中创建的DreamweaverKH表，如图76-3所示。

该数据表用于存储用户的注册信息。

用户名（即USENMAE）必须是惟一值，用户注册后一般被定义为非高级用户（即USEQL字段被定义为“否”值），只有经过公司管理员审核通过后，才会把用户定义为高级用户。

如果还没有通过公司管理员的审核，一般情况下GLSC字段都将定义为“否”，反之则定义为“是”。

操作步骤

步骤一设计基本页面

（1）创建动态页面并插入表单。

新建一个空白的“ASP.NET”动态页，将其命名为“uselogin.aspx”，并保存在站点的根据目录下，首先为页面插入表单，具体操作如图76-4所示。

（2）定义表单为ServerForm。

由于ASP.NET控件必须添加在ServerForm中，所以应将表单定义为ServerForm，具体操作如图76-5所示。

提示：

由于所有的ASP.NET控件必须添加到含有runat="server"的表单中，并且每一个ASP.NET页面只能拥有一个ServerForm，因此建议读者养成一个习惯，就是在对ASP.NET进行任何设计之前，首先为页面添加一个ServerForm［如图76-5中的步骤

（1）、步骤

（2）］，在以后实例中将会详细讲解这方面的知识。

（3）插入表格并进行样式设置。

参照以前的实例，在设计视图中为“uselogin.aspx”页面设计一个表格，并进行相关样式的设置，结果如图76-6所示。

（4）为“客户名称”添加文本框。

切换到【ASP.NET】快捷菜单栏，为“客户名称”添加文本框，设置ID为“USENAME”，如图76-7所示。

提示：

在图76-7所示的步骤3中输入ID为“USENAME”，这与将要存储的DreamweaverKH表的相应字段名“USENAME”是相同的。

如果将ASP.NET控件的ID设置的与读取/存储字段名相同，则其程序执行起来会更直接。

下面的控件如没特别说明，其ID都设置的与其将要存储的字段名相同。

（5）添加并设置ASP.NET控件。

继续为用户注册信息添加文本框，并分别将ID设置的与相应的字段名相同，结果如图76-8所示。

其中“性别”所对应的是下拉菜单，其列表项的设置如图76-9所示；“确认密码”对应的文本框的ID为“USEPASS1”，设置“密码”、“确认密码”所对应文本框的“文本模式”为“密码”，如图76-10所示。

6）添加【提交】按钮，如图76-11所示。

步骤二验证必填信息

（1）添加验证控件。

将光标移至文本框“USENAME”之后，添加验证控件RequiredFieldvalidator，如图76-13所示。

（2）添加验证控件并填写各项内容。

在弹出的【标签编辑器—RequiredFieldvalidator】窗口中为文本框“USENAME”添加验证控件，并填写各项内容，如图76-14所示。

（3）完成上一步操作后返回到【标签选择器】对话框中，继续为其他必填文本框添加RequiredFieldvalidator验证控件，具体方法参考以上操作，结果如图76-15所示。

提示：

确认文本框“USPASS1”没有添加RequiredFieldvalidator验证控件，因为可以通过CompareValidator验证控件比较输入的内容是否与文本框“USPASS”相同。

性别所对应的下拉菜单“USESIX”由于只有“男”、“女”两个选项，所以没有必要添加RequiredFieldvalidator验证控件，添加“*”只是为了让用户注意正确设置自己的性别。

步骤三密码比较验证

（1）打开【标签选择器】对话框。

如果目前【标签选择器】对话框已打开，则选择【ASP.NET标签】下的【验证服务器控件】，同时选择【asp：

CompareValidator】，单击【插入】按钮。

如果目前还没有打开【标签选择器】对话框，则要先单击【ASP.NET】快捷菜单栏上的【更多标签】按钮。

（2）添加比较验证控件并设置。

在弹出的【标签编辑器—CompareValidator】窗口中为文本框“USEPASS”添加与“USEPASS1”文本框的比较验证控件，相关设置如图76-16所示。

（3）单击【确定】按钮，完成CompareValidator验证控件的添加。

步骤四验证电子邮箱

（1）插入【asp：

Regularexpressionvalidator】。

在【标签选择器】对话框中选取【ASP.NET标签】下的【验证服务器控件】，并选择【asp：

Regularexpressionvalidator】，单击【插入】按钮。

（2）添加验证控件。

在弹出的【标签编辑器—Regularexpressionvalidator】窗口中为文本框“USEEMAIL”添加验证控件，如图76-17所示。

该控件的验证表达式为：

\w+（[-+.]\w+）*@\w+（[-.]\w+）*\.\w+（[-.]\w+）*。

提示：

这里的验证表达式，其实就是正则表达式。

关于正则表达式的有关知识，请读者参考有关资料以加深认识。

（3）最后保存“uselogin.aspx”，并在IE中进行预览。

本实例分别讲解了服务器控件是否非空、服务器控件的比较、服务控件验证的自定义三种验证方法。

如果要用设计更精细的服务器控件的验证，请读者参考正则表达的有关知识，对服务控件验证进行自定义。

本实例操作完