Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/1/30 1:13:33
第四篇:使用Visual,Studio,2008实现用户注册页面_[Asp.Net教程]

第四篇:使用Visual Studio 2008实现用户注册页面_[Asp.Net教程]

本节主要内容:数据验证控件的使用。


从我们第1节创建的模板创建一个新的web页面,对页面进行布局,如图1.




图1


代码:


Code








请注意:带有*的项目必须填写。





请选择您的用户名









●由字母a~z(不区分大小写)、数字0~9减号下划线组成

●只能以数字字母开头和结尾,例如:beijing.2008

●用户名长度为4~18个字符





请填写安全设置( 以下信息对保护您的帐号安全极为重要,请您慎重填写并牢记 )









密码长度6~16位,字母区分大小写










 











我就读的第一所学校的名称?
我最喜欢的休闲运动是什么?
我最喜欢的运动员是谁?
我最喜欢的物品的名称?



答案长度6~30位,字母区分大小写,一个汉字占两位。用于修复帐号密码



















for="year">年

01
02
03
04
05
06
07
08
09
10
11
12



01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31




用于修复帐号密码,请填写您的真实生日

































填写、验证保密邮箱,安全有保障








*



我已看过并同意《服务条款







 onClick="Button1_Click" Text="注册帐号" />




Code
body
{}{
}
/**//*master*/
.page
{}{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: fixed;
font-size: 9pt;
}
.header_div
{}{
clear: both;
margin: auto;
width: 1000px;
height: 90px;
}
.mybr
{}{
height: 10px;
}
.footer_br
{}{
height:20px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #CCFFCC;
}
.footer
{}{
float: right;
text-align: right;
font-size: 14px;
color: #8B8B8B;
margin-right: 100px;
}
.footerdiv
{}{
width: 980px;
padding-right: 10px;
}
.mainbody
{}{
}
.pagebody
{}{
}
/**//*menu*/
.mainmenu
{}{
background: #e5ecf9;
margin: auto auto 20px;
width: 975px;
border-bottom: #2652a4 0px solid;
height: 26px;
}


.menu_select_box
{}{
border-right: red 0px solid;
border-top: red 0px solid;
background: none transparent scroll repeat 0% 0%;
border-left: red 0px solid;
width: 180px;
border-bottom: red 0px solid;
}
.menu_select
{}{
border-right: #2652a4 1px solid;
border-top: #2652a4 1px solid;
padding-left: 0px !important;
font-size: 14px;
background: white;
left: 100px;
border-left: #2652a4 1px solid;
width: 70px !important;
color: #2652a4;
line-height: 25px;
border-bottom: white 0px solid;
position: relative;
top: 1px;
height: 25px;
text-align: center;
}
.menu_link
{}{
font-size: 14px;
background: none transparent scroll repeat 0% 0%;
float: right;
width: 780px;
color: #9bc9df;
line-height: 25px;
height: 25px;
}
#wrap
{}{
border-right: black 0px solid;
border-top: black 0px solid;
margin: 0px auto;
overflow: hidden;
border-left: black 0px solid;
width: 1000px;
border-bottom: black 0px solid;
}
#main
{}{
margin: 0px auto;
width: 1000px;
}
#header
{}{
text-align: left;
}
#sideleft
{}{
background: #fff;
float: left;
overflow: hidden;
width: 30%;
padding-left: 10px;
text-align: left;
}
#sideright
{}{
float: right;
width: 68%;
text-align: left;
padding-right: 10px;
}
#sideleft
{}{
margin-bottom: -32767px !important;
padding-bottom: 32767px !important;
}
#sideright
{}{
margin-bottom: -32767px !important;
padding-bottom: 32767px !important;
}


#navlist_main
{}{
padding-right: 2px;
padding-left: 2px;
font-size: 14px;
padding-bottom: 1px !important;
padding-top: 3px !important;
border-bottom: #787888 1px solid;
}
#navlist_main LI
{}{
display: inline;
margin: 0px;
list-style-type: none;
}
#navlist_main LI A
{}{
padding-right: 9px;
padding-left: 9px;
font-size: 14px;
padding-bottom: 3px;
margin-left: 1px;
padding-top: 5px;
letter-spacing: 1px;
text-decoration: none;
border-bottom-style: none;
}
#navlist_main LI A:link
{}{
color: #075db3;
}
#navlist_main LI A:visited
{}{
color: #075db3;
}
#navlist_main LI A:hover
{}{
color: #ff6600;
}
#navlist_main LI A.current
{}{
border-right: #787888 1px solid;
border-top: #787888 1px solid;
font-weight: bold;
background: #ffffff;
margin-left: 6px;
border-left: #787888 1px solid;
color: #666677;
margin-right: 10px;
border-bottom: white 1px solid;
letter-spacing: 0px;
}
/**//*endmenu*/
/**//*注册页*/
.section_title
{}{
top: 5px;
bottom: 5px;
right: 5px;
left: 5px;
}
.single_div
{}{
margin-left: auto;
margin-right: auto;
width: 730px;
}
.fleld_lable
{}{
vertical-align: top;
width: 200px;
text-align: right;
}
.desc
{}{
background-color: #DCE4FA;
}
.fleld_input
{}{
vertical-align: top;
width: 200px;
}
.general_input
{}{
width: 120px;
}
.button
{}{
text-align: center;
}
.hr
{}{
height: 10px;
border-bottom: #787888 1px solid;
border-bottom-color: #DCE4FA;
}
.table
{}{
width:100%;
}



双击注册按钮生成onclick事件。编写代码完成保存操作。


Code
protected void Button1_Click(object sender, EventArgs e)
{
//使用初始化器
Users u = new Users()
{
UserName = this.TextBoxUserName.Text,
NickName = this.TextBoxRealName.Text,
Password = this.TextBoxPassword.Text,
EMail = this.TextBoxMail.Text,
Question = this.DropDownList1.SelectedValue,
Answer = this.TextBoxAnswer.Text,
Birthday = this.TextBoxYear.Text + this.DropDownListMonth.SelectedValue + this.DropDownListDay.SelectedValue,
Sex = this.RadioButtonListSex.SelectedValue.MoonToBoolon()
};
db.Users.InsertOnSubmit(u);
db.SubmitChanges();
}



利用C#3.0的初始化器初始化对象u。利用代码db.Users.InsertOnSubmit(u);将u插入集合中。再使用db.SubmitChanges();将集合的变更提交到服务器。




下面开始本节的主题,数据验证。我们这里有许多数据需要验证。


1、 用户名:


a) 由字母a~z(不区分大小写)、数字0~9、点、减号或下划线组成


b) 只能以数字或字母开头和结尾,例如:beijing.2008


c) 用户名长度为4~18个字符


d) 数据库中不能有重复的用户名。


e) 必填


2、 登陆密码:


a) 密码长度6~16位


b) 重复密码要与首次输入的相同


c) 必填


3、 出生日期


a) 必填


b) 必须在1900~2008之间


4、 性别


a) 必填


5、 邮箱


a) 必填


b) 需要符合XXX@XX.XXX的规则


再看下.net提供的数据验证控件,如图2




图2


.net提供我们6个控件,按照顺序它们在MSDN分别这样描述


1、 RequiredFieldValidator:计算输入控件的值以确保用户输入值。


2、 RangeValidator :计算输入控件的值,以确定该值是否在指定的上限与下限之间。


3、 RegularExpressionValidator :计算输入控件的值,以确定该值是否与某个正则表达式所定义的模式相匹配。


4、 CompareValidator:将输入控件的值同常数值或其他输入控件的值相比较,以确定这两个值是否与由比较运算符(小于、等于、大于等等)指定的关系相匹配。


5、CustomValidator:计算输入控件的值以确定它是否通过自定义的验证逻辑。


6、 ValidationSummary:显示 Web 页上所有验证错误的列表。


前五个控件都是通过计算输入控件的值来判断是否符合我们设计的逻辑的。他们有一些公共的常用属性


1、 ErrorMessage:错误提示信息


2、 Display:用于指定验证控件中错误信息的显示方式,设置这个属性一般用于我们的页面布局。


None
验证消息从不内联显示。

Static
在页面布局中分配用于显示验证消息的空间。

Dynamic
如果验证失败,将用于显示验证消息的空间动态添加到页面。



Static也就是该控件为被激发的时候也会占据位置,Dynamic则相反。None则表示从不显示该验证控件,一般是与ValidationSummary控件联合使用。


3、 ControlToValidator:获取或设置要验证的控件的 ID


4、 SetFocusonError:获取或设置一个值,该值指示在验证失败时是否将焦点设置到ControlToValidator属性指定的控件上。


开始设置页面:


1、 将RequiredFieldValidatort拖动到必须输入的控件后面的TD中,并设置ControlToValidator属性与待验证控件的ID一致。将SetFocusonError设置成true,设置ErrorMessage属性。Display设置为Dynamic。


2、 将RegularExpressionValidator拖动到TextBoxUserName后面,除设置RequiredFieldValidatort设置的那几个属性以外再设置ValidationExpression 设置为 ^[a-zA-Z0-9"-".]{4,14} 。这个属性是用来设置用于验证的正则表达式的。^[a-zA-Z0-9"-".]表示允许的字符为字母数字与连接线‘-’,{4,14}表示字符数的范围。


同样的方式设置密码与重复密码的RegularExpressionValidator控件属性。


3、 在重复密码后添加CompareValidator属性,设置ControlToCompare属性为TextBoxPassword,ControlToValidate 属性为TextBoxRePassword。


4、 在出生日期后添加RangeValidator并设置其属性。


运行测试下我们的页面,这时除了用户名重复的验证没有做处理外其它的验证都已经在客户端做了数据验证。怎么为用户名重复添加验证呢?


在页面上方添加一个CustomValidator,以汇总所有数据验证控件错误信息。


在protected void Button1_Click(object sender, EventArgs e)添加下列代码


Code
if (db.Users.Where(user => user.UserName.Trim() == u.UserName.Trim()).Count() > 0)
{
//激活客户端验证控件。
this.CustomValidator1.ErrorMessage = "已经存在用户名为{0}的用户".MoonStringFormat(u.UserName);
this.CustomValidator1.IsValid = false;
return;
}

if (db.Users.Where(user => user.UserName.Trim() == u.UserName.Trim()).Count() > 0)是通过linq来判断数据库中是否已经存在用户名为u.UserName的数据。


this.CustomValidator1.IsValid = false;来通知CustomValidator数据验证没有通过。


Button1_Click的完整代码
protected void Button1_Click(object sender, EventArgs e)
{
Users u = new Users()
{
UserName = this.TextBoxUserName.Text,
NickName = this.TextBoxRealName.Text,
Password = this.TextBoxPassword.Text,
EMail = this.TextBoxMail.Text,
Question = this.DropDownList1.SelectedValue,
Answer = this.TextBoxAnswer.Text,
Birthday = this.TextBoxYear.Text + this.DropDownListMonth.SelectedValue + this.DropDownListDay.SelectedValue,
Sex = this.RadioButtonListSex.SelectedValue.MoonToBoolon()
};
SecurityDataContext db = new SecurityDataContext();
//var a = from user in db.User
// where user.UserName == u.UserName
// select user;
if (db.Users.Where(user => user.UserName.Trim() == u.UserName.Trim()).Count() > 0)
{
//激活客户端验证控件。
this.CustomValidator1.ErrorMessage = "已经存在用户名为{0}的用户".MoonStringFormat(u.UserName);
this.CustomValidator1.IsValid = false;
return;
}
//插入USER
//db.User并不会执行select操作。
db.Users.InsertOnSubmit(u);
db.SubmitChanges();
}


最终的HTML代码:
Code
<%@ Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="UsersManager.aspx.cs"
Inherits="DocTest.WebForm1" Title="Untitled Page" %>



周边:用户管理








请注意:带有*的项目必须填写。







请选择您的用户名









●由字母a~z(不区分大小写)、数字0~9减号下划线组成

●只能以数字字母开头和结尾,例如:beijing.2008

●用户名长度为4~18个字符

ErrorMessage="必须输入用户名。" SetFocusonError="True">
ErrorMessage="输入的用户名不符合规则。" ValidationExpression="^[a-zA-Z0-9\-\.]{4,14}">






请填写安全设置(&nbsp;以下信息对保护您的帐号安全极为重要,请您慎重填写并牢记&nbsp;)









密码长度6~16位,字母区分大小写

ErrorMessage="必须输入登陆密码。" Display="Dynamic">
ErrorMessage="输入的登陆密码不符合规则。" SetFocusonError="True" ValidationExpression=".{6,16}">












ErrorMessage="必须输入重复登陆密码。" Display="Dynamic">
ErrorMessage="输入的登陆密码不符合规则。" SetFocusonError="True" ValidationExpression=".{6,16}"
Display="Dynamic">

ControlToValidate="TextBoxRePassword" ErrorMessage="两次输入的密码必须相同。">













我就读的第一所学校的名称?
我最喜欢的休闲运动是什么?
我最喜欢的运动员是谁?
我最喜欢的物品的名称?



答案长度6~30位,字母区分大小写,一个汉字占两位。用于修复帐号密码



















for="year">年

01
02
03
04
05
06
07
08
09
10
11
12



01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31




用于修复帐号密码,请填写您的真实生日

ErrorMessage="必须输入出生日期。" SetFocusonError="True" Display="Dynamic">
MaximumValue="2008" MinimumValue="1900" SetFocusonError="True" ControlToValidate="TextBoxYear">


































填写、验证保密邮箱,安全有保障

ErrorMessage="必须输入邮箱。" SetFocusonError="True" Display="Dynamic">









*



我已看过并同意《服务条款







&nbsp;onClick="Button1_Click" Text="注册帐号" />









If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759