我的自学只是学了一点皮毛,只会最简单的使用,但是听完老师讲课,对于这些知识点的应用等更深入了一点,所以下面就对这一章进行补充。
对于相关知识点的理解,大概就是我自学的那样,所以主要就补充以下这些控件深入的应用。
问题一:对于TextBox的是否空白可以使用RequireFieldValidator控件,那如果要判断下拉框的选择与否呢?
比如:
为它添加RequireFieldValidator控件,却发现就算不选择,保持当前的状态,也不会显示为空。
这个要怎么解决呢?
这时候就要使用到RequireFieldValidator控件的属性:initialValue。
这个属性代表开始的状态,所以使用这个属性设置这个下拉框的初始状态,这样就可以辨别是否选择了。(这里判断是否设置成功,就需要借助一下ValidationSummary控件了)
运行一下:
二、CompareValidator控件的注意事项
对于CompareValidator控件,要注意:如果在小值上比较,就要将operator设置为LessThan;如果在大值上比较,就要设为GreatThan。
三、TakeColor.exe的取色方式
按Alt+C
四、设置圆角的语句
border-radius:5px;
五、应用实例
虽然笨,但是努力还是有成效的,这次提出的小练习,我觉着我完成的挺好的。
练习要求:
我最终完成的:
代码附上:
.aspx文件:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="StyleSheet1.css"/>
<style type="text/css">
.auto-style1 {
width: 93%;
height: 413px;
}
.auto-style2 {
height: 58px;
}
.auto-style3 {
height: 58px;
width: 233px;
}
.auto-style4 {
width: 233px;
}
.auto-style5 {
width: 233px;
height: 57px;
}
.auto-style6 {
height: 57px;
}
.txt{
width:600px;
height:36px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="top"><h1>LOGO</h1></div>
<div id="login">
<h2>注册账号</h2>
<hr />
<p> </p>
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="公司全称不能为空" ForeColor="Red">*</asp:RequiredFieldValidator>
公司全称</td>
<td class="auto-style2">
<asp:TextBox ID="TextBox1" runat="server" CssClass="txt" ForeColor="Silver">请输入公司名称</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="联系人不能为空" ForeColor="Red">*</asp:RequiredFieldValidator>
公司联系人</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" CssClass="txt" ForeColor="Silver">请输入公司联系人姓名</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style5">
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox3" ErrorMessage="号码不对" ForeColor="Red" ValidationExpression="(\(\d{3}\)|\d{3}-)?\d{8}">*</asp:RegularExpressionValidator>
手机号码</td>
<td class="auto-style6">
<asp:TextBox ID="TextBox3" runat="server" CssClass="txt" ForeColor="Silver">请输入11位手机号码</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">固定电话</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" CssClass="txt" ForeColor="Silver">请输入固定电话</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBox5" ErrorMessage="邮箱地址错误" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
邮箱地址</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" CssClass="txt" ForeColor="Silver" TextMode="Email">请输入邮箱地址</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox6" ErrorMessage="密码不能为空" ForeColor="Red">*</asp:RequiredFieldValidator>
输入密码</td>
<td>
<asp:TextBox ID="TextBox6" runat="server" CssClass="txt" ForeColor="Silver">请输入密码</asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox6" ControlToValidate="TextBox7" ErrorMessage="两次密码不一致" ForeColor="Red">*</asp:CompareValidator>
确认密码</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" CssClass="txt" ForeColor="Silver">请再一次输入密码</asp:TextBox>
</td>
</tr>
</table>
<br />
<hr />
<br />
<br />
<asp:RadioButton ID="RadioButton1" runat="server" Text="阅读并接受《用户协议》" />
<asp:Button ID="Button1" runat="server" Height="34px" Text="注册新用户" Width="171px" OnClick="Button1_Click1" />
<br />
<br />
</div>
</form>
</body>
</html>
Stylesheet1.css文件:
body {
background-color: #3079BE;
}
#top {
width: 1000px;
height: 50px;
margin: 50px auto;
}
#top h1{
font-size:60px;
color:aliceblue;
text-align:center;
margin:10px auto;
}
#login{
width:1000px;
height:700px;
background-color:antiquewhite;
margin:50px auto;
text-align:center;
border-radius:5px;
}
#login h2 {
font-size: 30px;
color: #3079BE;
text-align: center;
padding-top: 40px;
}
#login table{
margin:auto;
text-align:center;
}
#login hr{
width:900px;
margin:auto;
}
ok ,就这样吧,继续加油。