Dreamweaver动态网页实例：用户注册页面设计

《Dreamweaver动态网页实例：用户注册页面设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、效果说明　　用户通过“uselogin.aspx”注册成为公司的客户，如图76-1所示，当用户提交注册信息时，再由它对注册信息进行有效验证，如76-2所示，从而对公司的用户注册信息进行管理。创作构思　　通过ASP.NET验证服务器控件，可以对用户的注册信息进行验证。本实例需要用到实例75中创建的DreamweaverKH表，如图76-3所示。该数据表用于存储用户的注册信息。用户名（即USENMAE）必须是惟一值，用户注册后一般被定义为非高级用户（即USEQL字段被定义为“否”值），只有经过公司管理员审

2、核通过后，才会把用户定义为高级用户。如果还没有通过公司管理员的审核，一般情况下GLSC字段都将定义为“否”，反之则定义为“是”。操作步骤　　步骤一　设计基本页面　　（1）创建动态页面并插入表单。新建一个空白的“ASP.NET”动态页，将其命名为“uselogin.aspx”，并保存在站点的根据目录下，首先为页面插入表单，具体操作如图76-4所示。　　（2）定义表单为ServerForm。由于ASP.NET控件必须添加在ServerForm中，所以应将表单定义为ServerForm，具体操作如图76-5

3、所示。　　提示：由于所有的ASP.NET控件必须添加到含有runat="server"的表单中，并且每一个ASP.NET页面只能拥有一个ServerForm，因此建议读者养成一个习惯，就是在对ASP.NET进行任何设计之前，首先为页面添加一个ServerForm［如图76-5中的步骤（1）、步骤（2）］，在以后实例中将会详细讲解这方面的知识。　　（3）插入表格并进行样式设置。参照以前的实例，在设计视图中为“uselogin.aspx”页面设计一个表格，并进行相关样式的设置，结果如图76-6所示。（4）

4、为“客户名称”添加文本框。切换到【ASP.NET】快捷菜单栏，为“客户名称”添加文本框，设置ID为“USENAME”，如图76-7所示。　　提示：在图76-7所示的步骤3中输入ID为“USENAME”，这与将要存储的DreamweaverKH表的相应字段名“USENAME”是相同的。如果将ASP.NET控件的ID设置的与读取/存储字段名相同，则其程序执行起来会更直接。下面的控件如没特别说明，其ID都设置的与其将要存储的字段名相同。　　（5）添加并设置ASP.NET控件。继续为用户注册信息添加文本框，并

5、分别将ID设置的与相应的字段名相同，结果如图76-8所示。其中“性别”所对应的是下拉菜单，其列表项的设置如图76-9所示；“确认密码”对应的文本框的ID为“USEPASS1”，设置“密码”、“确认密码”所对应文本框的“文本模式”为“密码”，如图76-10所示。6）添加【提交】按钮，如图76-11所示。　　（7）添加【重置】表单按钮，如图76-12所示。步骤二　验证必填信息　　（1）添加验证控件。将光标移至文本框“USENAME”之后，添加验证控件RequiredFieldvalidator，如图76-

6、13所示。　　（2）添加验证控件并填写各项内容。在弹出的【标签编辑器—RequiredFieldvalidator】窗口中为文本框“USENAME”添加验证控件，并填写各项内容，如图76-14所示。　　（3）完成上一步操作后返回到【标签选择器】对话框中，继续为其他必填文本框添加RequiredFieldvalidator验证控件，具体方法参考以上操作，结果如图76-15所示。　　提示：确认文本框“USPASS1”没有添加RequiredFieldvalidator验证控件，因为可以通过CompareV

7、alidator验证控件比较输入的内容是否与文本框“USPASS”相同。性别所对应的下拉菜单“USESIX”由于只有“男”、“女”两个选项，所以没有必要添加RequiredFieldvalidator验证控件，添加“*”只是为了让用户注意正确设置自己的性别。步骤三　密码比较验证　　（1）打开【标签选择器】对话框。如果目前【标签选择器】对话框已打开，则选择【ASP.NET标签】下的【验证服务器控件】，同时选择【asp：CompareValidator】，单击【插入】按钮。如果目前还没有打开【标签选择器】

8、对话框，则要先单击【ASP.NET】快捷菜单栏上的【更多标签】按钮。　　（2）添加比较验证控件并设置。在弹出的【标签编辑器—CompareValidator】窗口中为文本框“USEPASS”添加与“USEPASS1”文本框的比较验证控件，相关设置如图76-16所示。　　（3）单击【确定】按钮，完成CompareValidator验证控件的添加。　　步骤四　验证电子邮箱　　（1）插入【asp：Regularexpressionvalidator】。在【标签