常见的控件:
  1.文本输入框（TextBox）

  2.按钮控件（Button）

  3.下拉选框（DropList）

  4.日期/时间控件(Date/TimePicker)

  5.（图片、文件）上传控件（Upload）

  6.树形控件（TreeView）

  7.列表框（ListBox）

  8.多格式文本框（RichTextBox）

  9.Tab控件

10.其他控件

11.多浏览器兼容性问题

以下是上述常用控件就样式、属性、功能、测试点等方面的总结

1.文本框

   纯文本框（不带其他类型控件）主要分为密码框、文本框(TextBox)和多行文本框（TextArea）

1.1密码框

（1）样式：

     

（2）属性：

    输入的文本会自动以黑色圆点或星号加密显示。

（3）功能：

    用于输入密码

（4）测试点（功能）：

      1.字符长度

      2.是否区分字母大小写

      3.全角半角输入（数字、英文）

      4.是否允许空格字符

      5.输入的密码是否密文显示，是否可以“显示密码”

      6.安全性：是否可以复制、粘贴方式输入、复制粘贴后是否看到明文  

      7.安全性：密码传输过程是否加密、数据库保存是否加密

      8.密码验证方式是否为比对模式。

      9.登录后是否会用明文传递参数

      10.利用复制粘贴等操作强制输入不允许的输入数据

      11.同文本框测试点

1.2文本框

（1）样式：

    

（2）属性：

    普通文本框，允许输入文本、数字等类型的字符

（3）功能：

    用于普通文本的输入和显示，常搭配其他控件使用

（4）测试点（功能）：

      1.输入中文、英文大小写、数字、特殊字符，构建有效等价类和无效等价类

      2.全角半角输入（数字、英文）和显示

      3.输入框是否为必填项（空输入）

      4.是否可以输入空格以及对空格的处理（包括全角半角、中英文、文本首尾、文本间的空格）

      5.字符长度

      6.支不支持快捷键操作（Enter、Ctrl+“C/V/X/A/Z”复制粘贴剪切全选撤销等）

      7.数值型、日期型、时间型文本框的合法性校验

      8.利用复制粘贴等操作强制输入不允许的输入数据

      9.特殊字符（串）：单引号、双引号、分号、Null、null、/、\、转义字符、</html>等

      10.JavaScript代码：<b>Hello</b>、alert("hello")

      11.html代码：<font>你好</font>、<script>alert(/xss/)</script>

      12.注入式Bug

     

1.3多行文本框

（1）样式：

（2）属性：

      可以输入复数行的文本。一般附带滚动条（样式1）或可以拖曳文本框大小（样式2），以便浏览多行文本

（3）功能：

    多行文本的输入。

（4）测试点（功能）：

      1.是否允许Enter换行

      2.保存后是否保持输入时的格式显示

      3.仅输入Enter换行能否保存

      4.是否能够调整文本框大小，拖动调整大小时，能否与页面其他元素自适应

      5.当输入文本较长时，是否出现滚动条或者自动扩展文本框大小

      6.同“文本框”的1~6测试点

2.按钮控件    

    按钮（Button）主要分为命令按钮（Push/Command Button）、单选钮（Radio Button）、复选框（Check Box）以及它们的组合。

2.1命令按钮

       应用程序中使用户通过简单的点击按钮来执行操作。当用户点击按钮后，不仅会执行相应操作，还会使该按钮看上去象被按下并释放一样。部分按钮会在鼠标悬浮其上且没有点击时改变按钮显示形态（如弹出说明框、字体变化、高亮）或改变光标显示形态（如变成手型）。

       命令按钮的显示形式可以是文本、图形或图片。大致可以分为纯文本、纯图标、纯图片、文本方框、文本和图标结合。

       对命令按钮的操作一般只有鼠标单击或键盘敲Enter/Space，有些按钮单击和双击的实现功能不同，而有些功能丰富的按钮在鼠标右键点击之后会弹出右键菜单。

     点击命令按钮产生的响应有弹出新窗口、弹出框体、弹出新页面、切换或弹出菜单（结合菜单栏）、弹出列表框（结合下拉列表）、刷新、放大/缩小/收起/关闭窗口等等。

    以下就命令按钮的显示形式进行讲解。

2.1.1 纯文本按钮

（1）样式：

（2）属性：

一般纯文本形式的按钮在

       光标悬浮其上时，一般文本的显示形态会变化，具体表现为底部出现下划线、字体颜色变化、字体高亮或出现背景框，还很有可能弹出详细的说明信息框。而且光标的形状会变成手型。当然文本形态也可以不变化。这些表现形式都是为了引导用户点击操作。

       操作按钮后，按钮的形态不定：可能不变化，可能字体颜色改变or文字改变以传达按钮已被点击过的意思，也可能按钮置灰无法二次操作。

（3）功能：

       大部分纯文本按钮都出现在网页中，用于打开新的页面（在新窗口或当前窗口打开）；在菜单中实现菜单切换或者弹出菜单栏，相当于选项卡，如Word的菜单栏就是点击文本进行切换的；其它丰富的功能，如点赞按钮、收起展开按钮、收藏按钮、验证码刷新按钮等等。

（4）测试点：

      1.按钮的文本是否正确、简洁、明了，样式是否美观、统一

      2.光标悬浮在按钮上时，文本和鼠标光标是否有需求的形态变化

      3.点击按钮是否响应正确的操作，如打开正确页面、实现需求功能

      4.点击完成后，按钮文本的形态是否正确

      5.能否实现tab、Enter等快捷键功能

      6.快速点击两次，是否一次有效；鼠标左键长按后移开是否取消了操作

      7.是否有右键菜单，且菜单内的功能是否实现

      8.是否能够复制文本文字（鼠标长按拖到输入框或光标选中复制粘贴）

2.1.2 纯图标按钮

（1）样式：

            

（2）属性：

       纯图标按钮的形状本身就具有很形象的解释力，光标悬浮在按钮上时经常会弹出更详细的说明信息框，用来具体解释此按钮实现的功能。鼠标悬浮时，也会出现图案高亮、出现背景框、光标变手型等形态变化。

      图标按钮经常会有两种状态：可使用和置灰状态。置灰状态对点击操作不响应。

      某些图标按钮会被分配相应的快捷键。

      图标不同于图片，一般大小比图片要小。

（3）功能：

     点击按钮后可以打开新页面新窗口，可以弹出菜单栏，也可以实现各种丰富的功能。最经典的图标按钮就是Windows的最小化、最大化、关闭、前进后退、刷新按钮。图标图案还可能是某网站的Logo，点击可进入网站首页。

（4）测试点：

      1.按钮图标是否正确对应功能含义、是否风格大小统一、是否清晰美观

      2.光标悬浮时，图标和鼠标光标是否有需求的形态变化

      3.点击按钮是否响应正确的操作

      4.点击完成后，按钮的形态变化是否正确

      5.如果是置灰的按钮，是否不能点击操作

      6.能否实现tab、Enter等快捷键功能

      7.如果分配了快捷键，快捷键操作是否有效

      8.快速点击两次，是否一次有效；鼠标左键长按后移开是否取消了操作

      9.是否有右键菜单，且菜单内的功能是否实现

2.1.3纯图片按钮

（1）样式：

（2）属性：

       纯图片按钮就是一张图片可以点击产生响应，不同于图标按钮，图片更有预览意义，图片内容不代表功能，同一功能可能因为场景、对象不同而图片内容不同。

      对图片按钮的操作一般就是单击，还可能右键弹出功能菜单。

（3）功能：

       图片按钮主要有三种功能：带有新页面的链接地址，点击能够打开新页面；点击能够打开功能窗口，如头像设置、封面修改窗口；点击放大查看图片。

（4）测试点：

      1.按钮图片是否正确对应内容、样式是否统一美观，图片分辨率是否良好

          2.光标悬浮时，图片和鼠标光标是否有需求的形态变化

      3.点击按钮是否打开正确的页面、正确的功能窗口或者是否正确放大

      4.快速点击两次，是否一次有效；鼠标左键长按后移开是否取消了操作

         5.是否有右键菜单，且菜单内的功能是否实现

      6.图片是否可以复制

2.1.4文本方框按钮

（1）样式：

             

（2）属性：

      文本方框按钮是最常见最经典的按钮，文字置于一个不透明的方框中间。一般方框的形状为长方形而不是正方的。

      此类按钮也会有可用和置灰状态，也可能有右键菜单、快捷操作，但一般不能复制文本和图案。如果按钮带有网站链接倒可以复制。

      按钮的方框使其脱离其他控件，在页面中很凸显。

（3）功能

     此类按钮一般很少用于链接网址，基本用于实现具体的功能或打开新的功能窗口。

（4）测试点：

      1.按钮中的文本是否正确，样式是否美观统一，是否置于方框正中，方框的样式是否美观

      2.光标悬浮时，按钮和鼠标光标是否有需求的形态变化

      3.点击完成后，按钮的形态变化是否正确

      4.如果是置灰的按钮，是否不能点击操作

      5.能否实现tab、Enter等快捷键功能

      6.如果分配了快捷键，快捷键操作是否有效

      7.是否有右键菜单，且菜单内的功能是否实现

      8.对非法的输入或操作给出足够的提示说明，如，空输入时点击“上传”按钮要给出提示

　  9.对可能造成数据无法恢复的操作必须给出确认信息，给用户放弃选择的机会，比如“删除”按钮

2.1.5 文本与图标结合的按钮

（1）样式：

                

       此类按钮类似于纯图标按钮加了文字的简略解说，能更好的解释按钮的功能。

      其属性功能和测试点也基本差不多，详情参考纯图标按钮。

2.2单选钮

（1）样式：

              

（2）属性：

      我们选中单选钮选项时，圆环中间出现一个小实心圆点表示该项被选中。在一组单选按钮选项中，只能选中其中一项，这和复选框是不同的。一组单选钮可以有初始值也可以没有。

（3）功能：

      用于用户只能从选项列表中选择一项的情况。

（4）测试点：

     1.单选选项是否统一按钮居左、文字描述居右

     2.选择单选按钮保存后，是否正确执行功能，或者数据库是否正确存入了选项值

     3.单选钮是否有初始值、默认选项

     4.同一组单选钮是否只能选中一个（互斥）

     5.同一组单选钮是否不能同时为空

     6.刷新页面后，是否仍然选中选项或默认值

     7.操作是只点击按钮选中还是可以点击按钮文字选中

2.3复选框

      复选框一般是用户多选的选项框。在更复杂的组合复选框中，复选框还能实现“全选”、“全不选”、“反选”功能。

2.3.1普通的选项复选框

（1）样式：

                           

            

                              

（2）属性：

      同一组复选框中可以同时选中多项，选中后会呈现打钩状。一组复选框一般没有初始值。

      复选框除了有选中和不选中两个状态，还有一个独立的属性：“不确定”（indeterminate）

      不确定状态的checkBox的值仍然只有checked或unchecked，状态仅仅是为了用户视觉界面上看起来更友好。例如带复选框的级联菜单时，子级菜单的多个复选框为部分选中的时，父级菜单的复选框应处于不确定状态，来反映子菜单的部分选中情况；或者为了表示选中或不选中都不影响时，可以显示为不确定，但实际内在值是确定的。

（3）功能：

      用于用户从选项列表中自由选择选项的情况（单选、多选、不选）。

（4）测试点：

      1.选择复选框选项保存后，是否正确执行功能，或者数据库是否正确存入了选项值

      2.复选框是否有初始值、默认选项

      3.复选框是否可以同时选中多个

      4.复选框是否可以同时为空

      5.刷新页面后，是否清除选项

         6.操作是只点击方框选中还是可以点击复选框文字选中

      7.父级菜单的复选框为不确定状态时，子集菜单是否为部分选中

      8.复选框为不确定状态时，是否符合逻辑

2.3.2全选反选复选框

（1）样式：

      

      

（2）属性：

      全选复选框——点击全选，其下的选项复选框组全选中，再次点击取消全选中

     反选复选框——选项复选框全选中或无选中时相当于全选；当选项复选框部分选中时，点击反选，所有选项复选框反向选择（即选中变为不选中，不选中变为选中）

     复选框可以同时实现全选和反选功能，也可以只实现全选功能。

（3）功能：

     实现选项全选或反选。

（4）测试点：

      1.当没有选项选中时，点击全选复选框，是否选项全选中，全选复选框变为选中状态

      2.当选项全选中时，点击全选复选框，是否选项取消全选中，全选复选框变为未选中状态

      3.当选项部分选中时，点击全选复选框，是否选项全选中，全选复选框变为选中状态

      4.当选项部分选中时，点击反选复选框，是否选项反向选择，反选复选框变为相反状态

       

3.下拉选框

（1）样式：

            

       

                   

（2）属性：

      下拉选框（DropList）包括一个右侧带有倒三角图标的文本框和下拉列表框，点击倒三角图标会弹出下拉列表，点击列表中的选项，选项就显示在文本框中。

      文本框可以编辑新增选项也可能选项固定，可以有初始值也可以初始为空。

      选项可以多选也可以单选，且多选下拉列表经常还会配合复选框来实现同时多选的效果。当光标悬浮于选项时，

还可以即时显示对应的预览效果。

      VB组合框中的Dropdown List/Combo，功能上和DropList十分类似，区别在于组合框明确只可单选选项、用户不能输入和编辑选项。实际情况下可以一同测试。

（3）功能：

      选择控件。

（4）测试点：

      1.初始值（即操作下拉框前文本框中显示的值）：为空、提示信息、某一选项

      2.列表选项的文本是否正确、左对齐、显示完全以及选项排列顺序

      3.列表选项是否可以为空，是否可以编辑

      4.列表框的长度高度是否合适，长度是否可变，如何将不能完全显示的选项显示出来

      5.列表内容是否可变，可变的最好要用SQL或其他方式验证正确性，不允许出现重复值

      6.列表超过列表框显示区域是否自动提供滚动条

      7.光标定位到下拉列表上时，是否支持键盘快捷操作，如↑,↓,Home ,End ,PageUP ,PageDown等

      8.可编辑下拉列表框是否可以插入新选项值，插入值的有效/无效等价类验证（包括空格、全半角字符、特殊字符等情况）、长度验证以及重复性验证

      9.可编辑下拉列表框是否可以删除选项，是否可以删除所有选项

    10.可编辑下拉列表框新增或删除选项值后，选项是否正确显示

    11.一组联动的下拉框，改变其中一个下拉框的选项值，其余的下拉框是否作出相应的可选选项内容的改变

    12.选择一个选项后，下拉列表是否自动收起

    13.多选下拉框选择多个选项后，文本框中显示是否正确

    14.有预览效果的下拉框，光标悬浮于选项时，显示的预览效果是否正确

4.日期/时间控件

（1）样式：

               

                      

（2）属性：

            日期/时间控件输入年月日或时分秒的时间信息。

       日期控件包含一个显示文本框和日期选择框插件。一般鼠标点击文本框或者右侧表示时间的图标就能弹出选择框。日期以日历表形式展现，一般月份年份会有个下拉列表供选择，选定好具体日期直接在日历表上单击、双击或“确定”。此外“日历表”还支持左右翻页、“清空”、“今天”、“确定”或“关闭”等功能按钮。

       时间控件一般支持手动输入和点击下拉选项设置。可以用up-down控件来调整时间。

       日期和时间控件使得时间信息的输入通过几次单击操作就能完成，更为方便。两种控件可以结合在一起使用。

（3）功能：

       实现日期或时间的输入。

（4）测试点：

   <1>日期控件：

       1.选择日期后，文本框是否显示正确日期，日期选择框是否收起

       2.日期格式是否正确，年月日是否有限制

       3.用左右按钮、下拉框切换年月是否正确

       4.是否有初始日期，如当前日期

       5.日期文本框是否可以手动输入或修改日期，修改成错误的年月日、错误的格式、错误的字符类型（中文字母特殊字符空格）是否有提示信息或者限制此类错误输入

       6.清空、今天、确定、关闭等按钮是否实现功能

   <2>时间控件：

       1.时间格式是否正确

       2.用up-down按钮、下拉框切换时分秒是否正确

       3.up-down按钮调整分和秒自增或自减时是否自动进位或退位（如满60秒分加1）

       4.是否有初始时间

       5.时间文本框是否可以手动输入或修改时间，修改成错误的时分秒、错误的格式、错误的字符类型（中文字母特殊字符空格）是否有提示信息或者限制此类错误输入

5.（图片、文件）上传控件

（1）样式：

         

      

      

（2）属性：

       实现文件的上传功能一般先点击“浏览”或“添加”按钮，会弹出本地文件“打开”窗口，按路径找到合适的文件并选中、打开（或者直接双击），文件名称（名称可能带路径）就会显示在列表或文本框中，再点击“上传”按钮等待上传即可。上传的过程中，会有进度显示条显示上传的完成情况。

（3）功能：

       上传本地文件到相关服务器上，然后对文件进行后续操作。

（4）测试点：

      1.选择合法格式大小的文件是否能够上传成功（每一种格式、文件大小的最大最小值和边界值都要测）

      2.选择不合法的格式或大小的文件上传，是否不成功且有错误提示

      3.选择0 kb的图片上传是否不成功且有错误提示

      4.选择一个合法但是正在使用中的文件（如打开的word文档），是否上传成功

      5.如果允许手动输入文件路径，在文本框中手动输入如下情况是否上传成功：

       （1）手动输入一个存在的合法的文件路径

       （2）输入不存在文件的路径

       （3）输入的路径下文件不合法

       （4）只输入文件名称不带路径

       （5）正确的文件路径包含空格（前中后、全半角空格）

       （6）路径为空

       （7）超长字符的路径是否可以输入

      6.是否支持中文路径或中文名称的文件上传

      7.文件名称最大最小字符个数，名称包含特殊字符、空格、程序语句是否影响上传

      8.上传常见木马，上传过程中有断网、服务器宕机等异常情况

      9.上传时服务器空间接近或已满

    10.上传成功的文件是否可以查看、删除、替换和下载，是否可以取消上传

    11.批量上传

    12.上传同名文件是否给出错误提示

6.树形控件

（1）样式：

         

      

（2）属性：

       树形控件用于管理一组分级的文件夹。最左侧的方框或者三角形图标控制着文件夹的收拢和展开。

       文件夹收拢时，方框图标内是一个“+”号、三角形图标正三角指右；点击图标，节点展开，显示出下级的文件夹或文件，方框图标内变成一个“-”号、三角形图标指下。而且树形图标只显示于有下级菜单的节点，没有下级菜单的不显示。

       经常，树形控件还会带有选择功能，每个文件夹或文件都附带一个复选框，上下级的选择状态互相影响。

（3）功能：

       文件菜单分级管理功能。

       文件菜单选择功能。

（4）测试点：

      1.树节点的图标展开前后是否风格一致，如果有树结构的连线是否显示正确

      2.默认树结构是展开还是收拢的

      3.所有节点和叶子的图标、名称是否正确

      4.点击某个节点时，是否只展开下一级的节点和显示该级的叶子还是显示下一级全部的

      5.页面刷新后，是保持现状还是恢复到默认树形状态

      6.执行了某一操作或树结构上的数据发生了变化，是保持现状还是恢复到默认树形状态

      7.选中某一节点的复选框，下级节点是否全部自动置为选中

      8.当两级节点全部选中时，取消选中上级节点，下级节点是否全部自动取消选中

      9.当两级节点全部选中时，取消选中某一下级节点，上级节点是否也自动取消选中或者置为不确定状态

7.列表框

（1）样式：

           

    

（2）属性：

       列表框用于提供一组条目（数据项），用户可以用鼠标选择其中一个或者多个条目，但是不能直接编辑列表框的数据。当列表框不能同时显示所有项目时候，他将自动添加滚动条，使用户可以滚动查阅所有选项。

       值得关注的是，列表框中的项目是通过程序插入到其中的，用户无法向清单中输入数据或者编辑数据，当选择其中的项目，并在用户单击一个按钮或者执行某个操作时，由应用程序完成对指定项目的具体操作。

       列表框和组合框的区别在于，组合框带有一个文本框，既能输入数据又能选择数据。

（3）功能：

       选中列表框中一个或多个选项，配合执行功能按钮或操作（如删除、上传、导出、下载、移动等等）。如果可以选中多个选项，即可实现批量操作。

（4）测试点：

      1.列表框中的文本是否正确、格式风格美观统一

      2.选择选项后执行操作是否成功

      2.列表选项超过列表显示区域时是否及时出现滚动条（包括垂直和水平方向）

      3.能否用键盘快捷键选择选项（上下键、Enter、Space等）

      4.能否用Shift键+点击连续多选、用Ctrl键+点击选择性多选、Ctrl+All键全选、直接用鼠标点击多选选项

      5.是否响应双击操作

8.多格式文本框

（1）样式：

      

              

（2）属性：

       RichTextBox（多格式文本框）控件是基于TextBox控件开发的一种功能更为强大、使用更为方便的控件，它可以完成TextBox的一切功能，具有上百个属性与方法：设置字体、颜色和链接；从文件中加载文本、插入图片；进行撤消与重做等编辑操作。

（3）功能：

       该控件常用于文本显示和编辑的字处理插件，如Windows的写字板或Office Word中。

（4）测试点：

      1.选中文本依次测试各种操作，是否正确实现，保存文本后是否正确显示

      2.不选中文本，点击操作，是否不实现

      3.点击文本格式类的操作后，再输入文本，是否正确响应（如设置字体为红色后输入文本，是否为红色）

      4.点击插入类的操作（如插入图片、表情、特殊字符、表格、分页符等），是否正确插入和显示

      5.复制粘贴剪切和撤销功能是否正确

      6.是否有查找字符和替换字符功能

      7.是否可以在文本编辑框实现快捷键操作以及右键菜单操作

      8.文本超过文本编辑框显示区域时，是否自动显示滚动条

      9.操作按钮点击后是否有按钮形态的变化，比如表示设置为倾斜状态的形态变化

    10.文字和图片、表情、特殊字符等插入元素的排列位置以及间距是否美观

9.Tab控件

（1）样式：

      

      

（2）属性：

      Tab控件也叫选项卡。每个选项卡代表一个活动的区域，用于将相关的控件集中在一起，放在一个页面中用以显示多种综合信息。浏览器的每个Tab代表一个网页，它方便在同一个窗口中打开多个网站。

       每个Tab选项卡通过鼠标选中或者快捷键实现切换，通过双击或者点击叉图标实现关闭，还可以长按拖动选项卡之间的位置。

（3）功能：

       Tab控件通常用于显示多个选项卡，其中每个选项卡均可包含图片和其他控件。

（4）测试点：

      1.选项卡的样式风格是否统一美观

      2.点击是否可以选中选项卡，切换是否流畅，每个选项卡的内容是否显示正确，被选中的选项卡是否高亮显示

      3.快捷键Ctrl+Tab键能否切换选项卡

      4.选项卡是否有关闭图标，点击是否能够关闭，双击能否关闭选项卡

      5.选项卡是否可以拖动改变位置，或者拖动移出窗口成为一个单独的页面

      6.当选项卡标题中的文字较长时，文字如何显示，光标悬浮其上时，是否会弹出完整的标题信息框

      7.选项卡标题中的图案是否显示清晰，分辨率良好

      7.选项卡的长度是否会根据选项卡标题长度或者窗口中打开的选项卡数目自适应

10.其它

       其它还有各种常见的控件，比如翻页控件、滚动条等。

10.1 翻页控件

（1）样式

      

         

（2）属性：

       翻页控件实际上就是一组实现翻页功能的控件组合。一般可以分为“首页”、“尾页”、“上一页”、“下一页”、数字页（即点击该数字就翻到第几页）按钮，通常还会带有页码的数字文本输入框和“确定”按钮组合实现快速翻页。

       数字页按钮除了点击翻页的功能，按钮的选中状态还能显示出当前所在页的页码。而文本框通常支持“Enter”快捷键，一般不支持全角数字输入。

（3）功能：

      将一个大的页面分成两个或以上的页面，并在页面之间便捷地相互跳转。

（4）测试点：

      1.翻页控件的整体风格样式是否美观统一，符合需求

      2.在非首页页面，点击“首页”（或代表首页的图标按钮），是否跳转到第一页，且数字“1”变为选中状态

      3.在非末页页面，点击“尾页”（或代表末页的图标按钮），是否跳转到最后一页，且最后一位数字变为选中状态

      4.随机点击数字页，是否跳转正确，且相应的数字变为选中状态

      5.在非首页点击“上一页”（或代表上一页的图标按钮），是否跳转到上一页

      6.在首页点击“上一页”，是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

      7.在非末页点击“下一页”（或代表下一页的图标按钮），是否跳转到下一页

      8.在末页点击“下一页”，是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

      9.当页码过多时，分别点击靠前、中间、靠后的页码，“...”省略号和数字页按钮的位置是否正确合理

             示例：

    10.页码输入文本框输入任意页数范围内的有效数字，点击“确定”是否正确跳转页面

    11.页码输入文本框输入0、超过总页数的数字、负数、特殊字符、中英文、全角字符，点击“确定”是否不跳转或者给出正确的错误提示或者不允许输入

    12.页码输入文本框输入空格（全半角、中英文状态），点击“确定”是否不跳转或者跳转到首页或者不允许输入

    13.页码输入文本框输入的数字含有空格（前中后、全半角、中英文状态）

    14.页码输入文本框输入有效数字，敲“Enter”是否可以正确跳转

    15.如果没有“首页”和“尾页”按钮，数字“1”和总页数数字是否常显

    16.关于总页数的文字信息是否正确

    17.当页面较长、翻页控件在页面底部时，点击页码，是否跳转到相应页面顶部

10.2 滚动条

1.  服务器控件

ASP.NET控件分为服务器控件和HTML标记。

服务器控件是在服务器端运行的执行程序逻辑的组件，服务器端的程序可以访问这类控件；而HTML标记是在客户端运行的，服务器端程序不能访问这类控件。

服务器控件编程的关键是runat属性，如果一个控件使用了runat="server"属性进行声明，则该控件被认为是服务器控件。

工具箱的“HTML”选项卡中的HTML控件都是HTML标记，可以通过加上runat="server"属性将它们改为服务器控件。
ASP.NET服务器控件又分为两大类：Web服务器控件和HTML服务器控件。

1..1  Web服务器控件的基本属性

Web服务器控件位于System.Web.UI.WebControl命名空间中，是从WebControl基类直接或间接派生的。

Web服务器控件的属性可以通过“属性”窗口来设置，也可以通过HTML代码实现。Web服务器控件以“asp:”为前缀，ID属性指定其ID值，作为控件的唯一标识。基本属性可为布局、行为、可访问性、外观等几类。

2 基本的Web服务器控件

2.1 Label控件又称为标签控件，用于显示静态文本。其主要的属性是Text，用于设置或获取该控件的显示文本。
仅当需要在服务器代码中更改文本内容或其他特性时，才使用Label控件

 

2.2 TextBox控件

TextBox控件是用于向Web页面输入信息的最常用的控件。默认为单行文本框，可通过TextMode属性来改变它的文本显示模式，该属性是TextBoxMode枚举类型的属性值，具有如下三种可选值。
①SingleLine：表示单行输入模式。
②MultiLine：表示多行输入模式。
③PassWord：表示密码输入模式。

例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="W5_3_2_1.aspx.cs" Inherits="W5_3_2_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>单价：<asp:TextBox ID="TextBox1" runat="server" Text="0" AutoPostBack="True" 
                ontextchanged="TextBox1_TextChanged"></asp:TextBox></p>
        <p>数量：<asp:TextBox ID="TextBox2" runat="server" Text="0" AutoPostBack="True" 
                ontextchanged="TextBox2_TextChanged"></asp:TextBox></p>
        <p>
           
        </p>
        <p>
            <asp:Label ID="Label1" runat="server" Text="<%#Convert.ToString(Convert.ToDecimal(TextBox1.Text)*Convert.ToInt32(TextBox2.Text))%>"></asp:Label>
        </p>
    </div>
    </form>

    <script type="text/javascript">
       
    </script>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class W5_3_2_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.DataBind();

    }



    protected void TextBox2_TextChanged(object sender, EventArgs e)
    {
        TextBox1.DataBind();

    }
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        TextBox2.DataBind();
    }
}

 

 

 

 

2.3  Button控件

Button控件可以分为提交按钮和命令按钮。

默认的Button按钮为提交按钮，在单击时，将包含它的表单提交给相应服务器进行处理，一般响应Click事件。

当设置了CommandName属性和CommandArgument属性后，Button按钮成为命令按钮，用于处理控件命令事件，在单击时可响应Command事件，从事件参数中可获取命令名及命令参数值。

例：响应Command事件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="W5_3_3_1.aspx.cs" Inherits="W5_3_3_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="container mx-auto text-center m-auto">
     <p>
         <asp:Button ID="Button1" runat="server" Text="Button1" 
             CommandArgument="button1" CommandName="B1" oncommand="Button1_Command" />&nbsp;
     
        <asp:Button ID="Button2" runat="server" Text="Button2" CommandArgument="button2" 
             CommandName="B2" oncommand="Button2_Command" /></p>
        <p>
            <asp:Label ID="Label1" runat="server" Text="你点击的是：Button1" Enabled="False"></asp:Label></p>
        <p>
            <asp:Label ID="Label2" runat="server" Text="你点击的是：Button2" Enabled="False" 
                ViewStateMode="Enabled"></asp:Label></p>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class W5_3_3_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Command(object sender, CommandEventArgs e)
        
    {
        Label1.Visible = true;
       // Label1.Text = "你点击的是：" + e.CommandArgument.ToString();
        Label2.Visible = false;
    }

    protected void Button2_Command(object sender, CommandEventArgs e)
    {
        Label2.Visible = true;
       // Label2.Text = "你点击的是：" + e.CommandArgument.ToString();
        Label1.Visible = false;
    }
}

 

 3. 列表控件

3.1 ListBox

ListBox控件（列表框控件）用于显示一组列表项，用户可以从中选择一项或多项。

例1：实现选择按钮

 

w5_4_4_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_1_1.aspx.cs" Inherits="w5_4_1_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>listBox</title>
   <style type="text/css">
       #div0
       {
          width:400px;
          height:200px;
          margin-left:auto;
          margin-right:auto;
          margin-top: 50px;
          margin:50px auto auto auto;
           
        }
       #div1
       {
         float:left;
         width:150px;
         height:200px;
         margin-right:10px;
         
        }
        #div2
        {
            float:left;
            width:80px;
            height:200px;
            text-align:center;
            margin-right:10px;
          }
   
       .btn
       {
         width:  50px;
         margin-top:10px;
          
           
           
        }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       <div id="div0">
         <div id="div1">
             <asp:ListBox ID="lstCouser" runat="server" Height="200px" Width="150px" 
                 SelectionMode="Multiple" 
                 onselectedindexchanged="lstCouser_SelectedIndexChanged">
                 <asp:ListItem>动态网站设计</asp:ListItem>
                 <asp:ListItem>算法设计与分析</asp:ListItem>
                 <asp:ListItem>Java程序设计</asp:ListItem>
                 <asp:ListItem>数据结构</asp:ListItem>
             </asp:ListBox>
         </div>
         <div id="div2">
             <asp:Button ID="btnSelectAll" runat="server" Text=">>" CssClass="btn" 
                 onclick="btnSelectAll_Click" />
             <asp:Button ID="btnRemoveAll" runat="server" Text="<<" CssClass="btn" 
                 onclick="btnRemoveAll_Click" />
             <asp:Button ID="btnSelect" runat="server" Text=">" CssClass="btn" 
                 onclick="btnSelect_Click" />
             <asp:Button ID="btnRemove" runat="server" Text="<" CssClass="btn" 
                 onclick="btnRemove_Click" />
          </div>
          <div id="div3">
              <asp:ListBox ID="lstSelectdCourse" runat="server" Height="200px" Width="150px" SelectionMode="Multiple"></asp:ListBox>
          </div>
       </div>
    
    </div>
    </form>
</body>
</html>

W5_4_4_1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_1_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void lstCouser_SelectedIndexChanged(object sender, EventArgs e)
    {

    }
    protected void btnSelectAll_Click(object sender, EventArgs e)
    {
        int count = lstCouser.Items.Count;
        for (int i = 0; i < count; i++)
        {
            ListItem item = lstCouser.Items[0];
            lstSelectdCourse.Items.Add(item);
            lstCouser.Items.Remove(item);
        }
    }
    protected void btnSelect_Click(object sender, EventArgs e)
    {
        int count = lstCouser.Items.Count;
        int index = 0;
        for (int i = 0; i < count; i++)
        {

            ListItem item = lstCouser.Items[index];
            if (item.Selected == true)
            {
                lstSelectdCourse.Items.Add(item);
                lstCouser.Items.Remove(item);
                index--;

             
            }
            index++;
        }
    }
    protected void btnRemoveAll_Click(object sender, EventArgs e)
    {
        int count = lstSelectdCourse.Items.Count;
        for (int i = 0; i < count; i++)
        {
            ListItem item = lstSelectdCourse.Items[0];
            lstCouser.Items.Add(item);
            lstSelectdCourse.Items.Remove(item);
        }

    }
    protected void btnRemove_Click(object sender, EventArgs e)
    {
        int count = lstSelectdCourse.Items.Count;
        int index = 0;
        for (int i = 0; i < count; i++)
        {

            ListItem item = lstSelectdCourse.Items[index];
            if (item.Selected == true)
            {
                lstCouser.Items.Add(item);
                lstSelectdCourse.Items.Remove(item);
                index--;


            }
            index++;
        }

    }
}

 

3.2 DropDownList控件

DropDownList控件（下拉列表框控件）让用户可以从单项选择下拉列表框中进行选择。

例子：

 

w5_4_2_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_2_1.aspx.cs" Inherits="w5_4_2_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <p>爱好;
           <asp:DropDownList ID="ddlHobby" runat="server" AutoPostBack="True" 
               onselectedindexchanged="ddlHobby_SelectedIndexChanged">
           </asp:DropDownList>
       </p>
       <p>
        
           <asp:Label ID="lbl" runat="server" Text="请选择爱好！"></asp:Label>
       
       </p>
    </div>
    </form>
</body>
</html>

w5_4_2_1.aspx.cs:
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_2_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) 
        {
            List<string> List = new List<string> { "打球", "看书", "上网", "散步" };
            ddlHobby.DataSource = List;
            Page.DataBind();

           
          
        }
    }
    protected void ddlHobby_SelectedIndexChanged(object sender, EventArgs e)
    {
        lbl.Text = "你的爱好是: " + ddlHobby.SelectedItem.Text;

        

    }
}

例二：

w5_4_2_2.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_2_2.aspx.cs" Inherits="w5_4_2_2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DropDownlist</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>
            <asp:DropDownList ID="ddlDep" runat="server" AppendDataBoundItems="True" AutoPostBack="True">
            </asp:DropDownList>
        </p>
        <p>
            <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" /></p>
    <p>
        <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label></p>
        
    </div>
    </form>
</body>
</html>

w5_4_2_2.aspx.cs:
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_2_2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) { 
        
          List<Dep> deps = new List<Dep>();
          deps.Add(new Dep("d01", "中文系"));
          deps.Add(new Dep("d02", "外语系"));
          deps.Add(new Dep("d03", "数学系"));
          ddlDep.DataSource = deps;
          ddlDep.DataTextField = "Dname";
          ddlDep.DataValueField = "Dno";
          ddlDep.DataBind();
          ddlDep.Items.Insert(0,new ListItem("无",""));
            //添加空系

        }


    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblMessage.Text = "你选中的值是：" + ddlDep.SelectedItem.Value+"<br />对应的文本是：" + ddlDep.SelectedItem.Text;

        
    }
}

 

 

3.3  CheckBoxList控件

CheckBoxList控件又称为复选框列表控件，该控件为用户提供了一种输入布尔型数据的方法，允许用户进行选择。
CheckBoxList控件与CheckBox控件类似，不同之处是CheckBox只有一个复选框，CheckBoxList包含多个复选框。

例：

 

 

w5_4_3_1..aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_3_1.aspx.cs" Inherits="w5_4_3_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <p>请选择你的爱好：</p>
       <p> 
           <asp:CheckBoxList ID="chkHobby" runat="server" AutoPostBack="True" 
               CellSpacing="5" onselectedindexchanged="chkHobby_SelectedIndexChanged" 
               RepeatColumns="2">
               <asp:ListItem>读书</asp:ListItem>
               <asp:ListItem>绘画</asp:ListItem>
               <asp:ListItem>游泳</asp:ListItem>
               <asp:ListItem>音乐</asp:ListItem>
               <asp:ListItem>摄影</asp:ListItem>
               <asp:ListItem>跳舞</asp:ListItem>
           </asp:CheckBoxList>
       </p>
       <p>
           <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label></p>
    </div>
    </form>
</body>
</html>

W5_4_3_1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_3_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void chkHobby_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblMessage.Text = "你的爱好：<br /><br />";
        for (int i = 0; i < chkHobby.Items.Count; i++) {
            if (chkHobby.Items[i].Selected) {
                lblMessage.Text += chkHobby.Items[i].Text + "<br />";
            
            }
        
        }
    }
}

 

 

3.4  RadioButtonList控件

RadioButtonList控件（单选按钮列表控件）用于构建单选按钮列表，允许用户互斥地在列表中选择一项。

 

例：

 

W5_4_4_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_4_1.aspx.cs" Inherits="w5_4_4_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
       table
       {  
           border-style :solid;
           border-width:1px 0px 0px 1px;
           width: 100%;
           
           
       }
       .td1
       {
           border-style: solid;
           border-width: 0px 1px 1px 0px;
           text-align: center;
      }
      .td2
      {
          border-style:solid;
          border-width: 0px 1px 1px 0px;
          
      }
    #div0
    {
        width:300px;
        height: 20px auto 0px auto ;
        
     }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div0">
      <table cellspacing="0">
         <tr>
          <td class="td1">
            性别:
         </td>
         <td class="td2"> 
             <asp:RadioButtonList ID="radlGender" runat="server" 
                 RepeatDirection="Horizontal" AutoPostBack="False">
                 <asp:ListItem>男</asp:ListItem>
                 <asp:ListItem>女</asp:ListItem>
             </asp:RadioButtonList>
         </td>
         </tr>
        <tr>
          <td class="td1">
            职称:
         </td>
         <td class="td2"> 
             <asp:RadioButtonList ID="radlTitle" runat="server" AutoPostBack="False">
                 <asp:ListItem>助教</asp:ListItem>
                 <asp:ListItem>讲师</asp:ListItem>
                 <asp:ListItem>副教授</asp:ListItem>
                 <asp:ListItem>教授</asp:ListItem>
             </asp:RadioButtonList>
         </td>
         </tr>
      </table>

      <p>
          <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" /></p>
          <p> 
              <asp:Label ID="lblmassage1" runat="server" Text=""></asp:Label><br />
              <asp:Label ID="lblmessage2" runat="server" Text=""></asp:Label>
          </p>
    </div>
    </form>
</body>
</html>

W5_4_4_1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_4_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        foreach (ListItem item in radlGender.Items) {
            if (item.Selected) {
                lblmassage1.Text = "性别为;" + item.Text;

            }
        
        }
        foreach (ListItem item in radlTitle.Items)
            if (item.Selected)
                lblmessage2.Text = "职称为;" + item.Text;
    }
}

bootstrap4实现

w5_4_4_2.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_4_2.aspx.cs" Inherits="w5_4_4_2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>bs4实现</title>
     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
<div  class="container">
      <table class="table table-bordered w-25 h-25 table-striped" >
         <tr>
          <td >
            性别:
         </td>
         <td> 
             <asp:RadioButtonList ID="radlGender" runat="server" 
                 RepeatDirection="Horizontal" AutoPostBack="False">
                 <asp:ListItem>男</asp:ListItem>
                 <asp:ListItem>女</asp:ListItem>
             </asp:RadioButtonList>
         </td>
         </tr>
        <tr>
          <td>
            职称:
         </td>
         <td> 
             <asp:RadioButtonList ID="radlTitle" runat="server" AutoPostBack="False">
                 <asp:ListItem>助教</asp:ListItem>
                 <asp:ListItem>讲师</asp:ListItem>
                 <asp:ListItem>副教授</asp:ListItem>
                 <asp:ListItem>教授</asp:ListItem>
             </asp:RadioButtonList>
         </td>
         </tr>
      </table>

      <p>
          <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" /></p>
          <p> 
              <asp:Label ID="lblmassage1" runat="server" Text=""></asp:Label><br />
              <asp:Label ID="lblmessage2" runat="server" Text=""></asp:Label>
          </p>
    </div>
    </form>
</body>
</html>

w5_4_4_2.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_4_4_2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {

    }
}

3.5 验证控件

为了确保用户在表单的各个域中输入正确的数据或所输入的数据符合商业逻辑的需求，应用程序需要进行客户端和服务器端的一系列验证。
ASP.NET内置了一套用于进行验证的控件，使用这套控件，开发人员只需要定义几个属性或编写少量代码，就可以实现验证过程。

3.5.1 RequiredFieldValidator控件

RequiredFieldValidator控件要求用户必须在所关联的控件中输入一个值，不能为空。
常用属性说明：
①ControlToValidate，要进行检查的控件
②ErrorMessage，当检查不合法时，显示的错误信息
③Display，错误信息的显示方式。Static，错误信息在页面占有确定的位置；Dymatic，在错误信息出现时才占用页面空间；None，不出现错误信息，但可在ValidatorSummary控件中统一显示。
④ForeColor，错误信息文本的颜色

例：

w5_5_1_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_5_1_1.aspx.cs" Inherits="w5_5_1_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <p> 姓名：
           <asp:TextBox ID="userName" runat="server"></asp:TextBox>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
               ErrorMessage="*姓名不能为空" ControlToValidate="userName" ForeColor="Red"></asp:RequiredFieldValidator>
       </p>
       <p>
           <asp:Button ID="btnSubmit" runat="server" Text="提交" /></p>
         <p>
             <asp:Label ID="lblMessage" runat="server" Text="还没提交"></asp:Label></p>
    </div>
    </form>
</body>
</html>

w5_5_1_1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_5_1_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && (userName.Text != null))
        {

            lblMessage.Text = "已提交，";
       
        }
    }
}

 

 

3.5.2 CompareValidator控件

用于检查所关联的控件的值与其他值比较的结果，或进行一个数据类型的检查。
常用属性：
①Type，要比较的控件的数据类型，可以是String、Integer、Double、Date或Currency。
②Operator，比较操作，有七种比较方式，等于、不等、大于、大于等于、小于、小于等于及数据类型检查。
③ControlToCompare，与所验证的输入控件进行比较的输入控件
④ValueToCompare，与所验证的输入控件进行比较的常数值

例子：

w_5_2_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_5_2_1.aspx.cs" Inherits="w5_5_2_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <p> 用户名：<asp:TextBox ID="userName" runat="server"></asp:TextBox></p>
     <p>用户密码：<asp:TextBox ID="password1" runat="server" TextMode="Password"></asp:TextBox></p>
     <p>确认密码：<asp:TextBox ID="password2" runat="server" TextMode="Password"></asp:TextBox>
     
         <asp:CompareValidator ID="CompareValidator1" runat="server" 
             ErrorMessage="*密码不一致" ControlToCompare="password1" ControlToValidate="password2" 
             ForeColor="Red"></asp:CompareValidator>
     </p>

     <p>出生日期：<asp:TextBox ID="birthday" runat="server"></asp:TextBox>
         <asp:CompareValidator ID="CompareValidator2" runat="server" 
             ErrorMessage="*日期格式错误" ControlToValidate="birthday" ForeColor="Fuchsia" 
             Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
     </p>
     <p>
            <asp:Button ID="btnSubmit" runat="server" Text="提交" /></p>
    </div>
    </form>
</body>
</html>

w5_5_2_1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class w5_5_2_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

3.5.3 RangeValidator控件

用于检查所关联控件的值是否在一个最小值和最大值之间。

 

3.5.4 RegularExpressionValidator控件

用于检查输入控件的值是否匹配正则表达式定义的模式。
如果输入控件为空，则表明验证成功。如果相关输入控件需要一个值，则除了使用 RegularExpressionValidator 控件外，还须使用 RequiredFieldValidator 控件。

正则表达式是正则表达式引擎尝试匹配输入文本的一种模式。模式由一个或多个字符文本、运算符或构造组成。
语法参见“正则表达式语言元素”。
https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/regular-expression-language-quick-reference

https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/regular-expression-language-quick-reference

 

https://www.cnblogs.com/xinaixia/p/4976821.html

https://www.cnblogs.com/testsec/p/6095656.html

https://www.cnblogs.com/eric_lin/archive/2010/11/11/1874749.html

https://www.cnblogs.com/shiguangshuo/p/4838845.html

https://blog.csdn.net/my98800/article/details/62214649

例子：

 

W5_5_4_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_5_4_1.aspx.cs" Inherits="w5_5_4_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <p> 电话：<asp:TextBox ID="txtTel" runat="server"></asp:TextBox>
     </p>
    <p> Email: 
        <asp:TextBox ID="TxtEmail" runat="server"></asp:TextBox></p>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" validationexpression= "(13[0-9]{9})|(159[0-9]{8})|([0-9]{4}-[0-9]{8})|([0-9]{3}-[0-9]{8})|([0-9]{4}-[0-9]{7})"
            ErrorMessage=". 号码输入有误" ForeColor="Red" ControlToValidate="txtTel"></asp:RegularExpressionValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ErrorMessage="*号码输入有误" ControlToValidate="txtTel"></asp:RequiredFieldValidator>
            
            <br />
       
        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
            ErrorMessage="*Email输入有误" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
            ControlToValidate="TxtEmail"></asp:RegularExpressionValidator>

        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
            ErrorMessage="Email输入有误" ControlToValidate="TxtEmail"></asp:RequiredFieldValidator>
        <p>
            <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" /></p>
        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>

aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;

public partial class w5_5_4_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {/*
        Regex re = new Regex(@"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");//实例化一个Regex对象

        if (re.IsMatch(TxtEmail.Text) == true)//验证数据是否匹配
        {

            lblMessage.Text = "邮箱正确";//匹配则弹出”邮箱正确“

        }

        else
        {

            lblMessage.Text = "邮箱错误";//不匹配则弹出”邮箱错误“

        }
        Regex rx = new Regex(@"^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$|^(13|15)\d{9}$", RegexOptions.None);
        */
    }
}

我们知道，在ASP.NET中，使用了两类控件，一类是HTML控件，还有一类是WEB控件。

WEB控件我们已经很熟悉，因为它是ASP.NET提供，一般关于ASP.NET的教程文章都会仔细介绍这些控件的详细应用技巧；

而HTML控件，很多关于ASP.NET的文章仅仅一句话略过，甚至说只要在原来的HTML基础上加上“RunAt=”Server””就可以了，

以致很多用户在使用ASP.NET的过程中几乎没有使用HTML控件，更加不知道这些控件的具体使用方法和详细功能。

其实，HTML控件虽然在使用方法上和HTML有一点相似，但是，在功能上，HTML控件可以具有自己的“事件”，

所以，一些HTML完全不可能实现的功能，使用HTML控件可以简单实现。 

【Web服务器控件】

Web服务器控件 (Web server control) 

属于 System.Web.UI.WebControls 命名空间的 ASP.NET 服务器控件。Web 服务器控件比 HTML 服务器控件更丰富、更抽象。Web 服务器控件在 ASP.NET 页上有 asp 标记前缀，例如 <asp:Button runat="server" />。

HTML控件直接映射到 HTML 元素。

HTML控件可以通过修改代码将其变成Web服务器端控件，几乎所有的HTML标记只要加上runat = "server"，这个服务器控件标识属性后都可以变成服务器端控件。这与普通HTML标记相比最大的区别在于，服务器端控件可以通过服务器端代码来控制。

 

【WEB服务器控件是HTML控件的一种扩展】,区别是: 　　1)前者可以触发服务器控件特有的事件，后者只能通过回递的方式触发服务器上的页面级事件。 　　2)输入到前者中的数据在请求之间可以维护（即具有状态管理功能）,而后者无法自动维护数据，只能使用页面级的脚本来保存和恢复。 　　3)前者可以自动检测浏览器并调整到恰当的显示，而后者没有自动适应功能，必须在代码中手动检测浏览器。 　　4)每个服务器控件都具有一组属性，可以在服务器端的代码中更改控件的外观和行为，而后者只有HTML属性。

区别是在响应客户端请求时所返回结果,点击某个WEN服务器控件在发送请求的时候,所返回来的是整个页面,

而HTML控件则是点击某个控件,结果返回在只是一些与之相关联的地方,不会整个页面在重新获取

所有如果某些控件不需要服务器端的事件或状态管理功能时，可以选择HTML控件，这样可以提高应用程序的性能。

ASP.NET中html控件和web控件 虽然好多功能相同并且长得很像 ，但是它们的内部实现机制是完全不一样的 ，Web控件要比Html控件执行效率要好 

   
   1. 使用起来也相当方便,举个简单的例子,例如Button的生成: 
   Html控件是将庞大控件集合全部弄到页面中，用到哪个功能，就设置一下属性,如下: 
   <input type=submit/button runat=server> 
   这样会占用相当大的控件资源 
   
   Web控件是将集成式的拆解成单功能的： 
   <asp:button id="btnOK" /> 
   这样就可以节省不必要的控件所占用的资源了 
   
   2.Web控件具有回送功能,能够用ViewState维持控件的状态. 
    Html控件则不能,当点击页面的操作，其状态就会丢失. 
    可以做这样的一个实验: 
    I. 分别建立两个文件: a.html b.aspx 
    II.在a.html页面中加Html控件的RadioButton和一个button， 
    在b.aspx中加Web控件的RadioButton和一个button 
    III.a.html直接双击浏览器运行,b.aspx通过IIS运行 
    IV.在a.html运行界面中，选中RadioButton,再单击Button按钮，会发现RadioButton会 
    取消选中(丢失其状态),但在b.aspx页面执行同样的操作，RadioButton不会丢失，因为ViewState 
    给它保存了状态. 您可以在运行界面点击浏览器菜单"查看"->“源文件",打开Html代码文件， 
    找到加密后的ViewState,类似于下面: 
    <input type="hidden" name="_VIEWSTATE" value="dDw0ajfmafmjfzzmj4"/> 
    其实ViewState实现原理也是将一些信息放到隐藏的一个控件中，并且asp.net生成的ViewState信息 
   
    是存储在客户端的 
    这里要注意的一点是： 
    只有当格式为*.aspx文件，并且控件具有属性:"runat=server"时，回送功能才能打开 
   
   
   3. Html控件与Web控件最大的区别是它们对事件处理的方法不同。对于Html窗体控件， 
   当引发一个事件时，浏览器会处理它。但对于Web控件，事件仅由浏览器生成，但浏览 
   器不会处理它，客户端要给服务器发个信息，告诉服务器处理事件。 不过有些事件， 
   比如: 
    按下键/移动/鼠标等事件，Asp.net中没有这些事件 
    (因为这些事件即时性强，服务器处理得不够及时)，这时候Html控件就发挥其作用了，结合Html事件 
   
    协助完成. 
   
   如下是一些Html常用的事件: 
   在浏览器上执行的Html控件事件: 
   
   单击时触发: 
   <INPUT type="button" value="Click Me" οnclick="alert('Hi,你好!');"> 
   
   鼠标弹起时触发: 
   <INPUT type="button" value="Click Me" οnmοuseup="alert('Hi,你好!');"> 
   
   //悬浮在控件上方时触发 
   <INPUT type="button" value="Click Me" οnmοuseοver="alert('Hi,你好!');"> 
   
   //鼠标在控件上方移动时触发 
   <INPUT type="button" value="Click Me" οnmοusemοve="alert('Hi,你好!');"> 
   
   //双击控件时触发 
   <INPUT type="button" value="Click Me" οndblclick="alert('Hi,你好!');"> 
   
   //当焦点在控件时，按键时触发 
   <INPUT type="button" value="Click Me" οnkeypress="alert('Hi,你好!');"> 
   
   //按键按下时触发 
   <INPUT type="button" value="Click Me" οnkeydοwn="alert('Hi,你好!');">  


在不需要与后台进行交互时就使用HTML控件，它的占用的资源比较少，速度也比较快,在需要与后台进行交互时，就使用WEB控件，或者在HTML   控件上加上runat="server"   也可以将一个HTML控件转换成交互控件，但这样占用的资源就和Web控件没任何分别了。 
       WEB控件可以响应服务器端事件，可以在后台代码中设置相关属性和方法等！HTML不可， WEB服务器控件需要通过服务器处理后译为HTML控件再发送给浏览器，所以比较耗费服务器资源，并由于有IEWSTATE，所以在回送的时候会保持控件状态（也可以设置不保存）也因此增加了回送信息量。HTML直接发送到浏览器，不另耗费服务器资源，但无状态保存！    
       获得HTML控件的值   需要使用REQUEST的FORM   方法，WEB控件就可以直接通过属性直接处理！   
 所以，一般来说，对于不需要保存控件状态，并无什么对值处理的地方就可以使用HTML 如果需要对控件进行动态的处理，或要保存其状态等   就可以WEB服务器控件！WEB服务器控件用起来个人认为要方便些，但是就是另外多耗费服务器资源！   
    很多书上都说，考虑性能的话在能不用WEB服务器控件的地方就尽量不用。    
    什么时候用什么时候不用还是要看具体情况，在条件宽松的情况下就看个人习惯了

 

 

【转】http://bbs.blueidea.com/thread-401431-1-1.html

一、HTML控件介绍 
HTML控件在ASP.NET编程中具有主要位置，由于其简单和HTML的相似性，很多时候，我们可以使用HTML控件来代替WEB控件。在ASP.NET中，HTML控件一共有20种，它们之间的相互关系如下： 
转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消

二、HTML控件的使用 
HTML控件的使用简单，重要在于灵活使用。HTML和ASP的使用，让我们养成了一些不是太好的习惯，包括代码的编写，甚至已经完全脱离了面向对象编程，现在，我们使用HTML控件，慢慢的必须回到面向对象编程的编码习惯和思路。HTML控件比较多，我们现在挑选比较常用和实用的几个控件举例介绍。 
1、HTMLAnchor控件 
在ASP中，我们建立一个链接是这样的<a href=”链接URL”>链接文字</a>。这样建立的一个链接，如果不和JavaScript结合的话，唯一的功能就是一个链接，而且，这个链接不能有任何特殊一点的功能。现在，我们来看使用HTMLAnchor实现一个JavaScript中常见的程序，就是用户点击链接以后，链接文字变成别的文字。以下程序点击“点击我”以后，链接文字变为“欢迎你”。程序代码如下： 
<%@ Page Language="vb"%> 
<%@ Import Namespace="System.Data" %> 

<script runat="server" language="VB"> 
Sub btnclk(Sender as Object,E as EventArgs) 
a1.InnerText="欢迎你" 
End Sub 
</Script> 

<Form RunAt="Server"> 
<A id="a1" RunAt="Server" onServerClick="btnclk">点击我</A> 
</Form> 
在以上的代码中，链接有了事件处理！这样，在链接点击以后，我们可以做一些必要的处理。需要注意的一点是：这里，不是onClick而是onServerClick。现在，我们来看一个比较复杂的举例，在这个举例里面，点击链接可以显示一张图片，再一次点击，可以隐藏该图片，代码如下： 
<html> 
<head> 

<script language="C#" runat="server"> 
void Page_Load (Object sender, EventArgs e) { 
if (!IsPostBack) { 
showhideLink.InnerText = image.Visible ? "隐藏图片" : "显示图片"; 
} 
} 

void ShowHideAd(Object sender, EventArgs E) { 
image.Visible = image.Visible ? false : true; 
showhideLink.InnerText = image.Visible ? "隐藏图片" : "显示图片"; 
} 
</script> 
</head> 

<body> 
<form runat="server"> 

<p><a id="showhideLink" runat="server" onServerClick="ShowHideAd"/></p> 

<table id="image" cellpadding=3 visible=false runat="server"> 
<tr><td> 
<img src="x.gif"> 
</td></tr> 
</table> 

</form> 
</body> 
</html> 
程序运行效果： 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消



2、HTMLButton控件 
HTMLButton没有太多的变化，但是，按钮的外观处理比较任意一点，来看一个举例： 
<form runat="server"> 
<p>With embedded <b><img></b> tag: </p> 
<p><button id="Button1" runat="server" 
style="width:157; height=200" 
onServerClick="saySomething"> 
<img src="/aspxtreme/shared/images/billg_tongue.gif"  
width="157" height="200" border=0 alt=""> 
</button> 
<p>With rollover effect: </p> 
<p><button id="Button2" runat="server" 
onServerClick="saySomething"  
style="font: 8pt verdana; background-color:lightgreen;  
border-color:black; height=30; width:100" 
οnmοuseοver="this.style.backgroundColor='yellow'" 
οnmοuseοut="this.style.backgroundColor='lightgreen'"> 
Click me too! 
</button> 
<p><span id="Message" runat="server" /> 
</form> 
在以上代码中，当用户鼠标移到按钮上和离开按钮时，按钮的表面颜色是不一样的，效果比较特别，如图： 
转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消





   

3、HtmlGenericControl控件 
从控件名字上，可能我们很难猜测这个控件的功能。仔细观察所有的HTML控件，我们发现有一些HTML标记没有对应的HTML控件，比如：<body>、<div>、<span>等，而这些HTML标记又比较重要，如果需要用到这些标记怎么办呢？HTMLGenericControl就是这些标记的控件。现在，我们看一个比较有趣的举例，在这个例子中，用户可以选择页面的背景颜色！这个功能在一些文学、读书网站、资源网站可能比较实用，因为这些网站可能提供大量资料给浏览者，如果用户阅读时间较长而所有资料格式都差不多的话，用户有可能感觉网站比较单调而且任意疲劳，这时候，如果可以让用户选择网页的背景颜色，用户就会感觉比较舒适。来看程序源代码： 
<html> 
<head> 
<title>试验HtmlGenericControl</title> 
<script language="C#" runat="server"> 
void Page_Load (object Source, EventArgs e) { 
Body.Attributes["bgcolor"]=ColorSelect.Value; 
} 
</script> 
</head> 

<body id="Body" runat="server"> 
<Center> 
<form runat="server"> 
<p>选择页面背景： </p> 
<select id="ColorSelect" runat="server"> 
<option>Aqua</option> 
<option>Bisque</option> 
<option>Chartreuse</option> 
<option>DodgerBlue</option> 
<option>ForestGreen</option> 
<option>Gainsboro</option> 
<option>HotPink</option> 
<option>Ivory</option> 
<option>Khaki</option> 
<option>Lavender</option> 
<option>Magenta</option> 
<option>NavajoWhite</option> 
<option>Olive</option> 
<option>PaleGoldenRod</option> 
<option>Red</option> 
<option>SandyBrown</option> 
<option>Tan</option> 
<option>Violet</option> 
<option>Wheat</option> 
<option>YellowGreen</option> 
</select> 
<input type=submit runat="server" Value="确定"> 
</form> 
</Center> 
</body> 
</html> 
程序运行效果如下： 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消




这个程序很有趣，而且非常简单，从这里，我们可以感受到这个控件的方便和实用。其实，这个控件实现的一些功能，我们以前可能很少使用，甚至都没有仔细考虑，这就是新的Asp.NET需要我们挖掘的一些地方，也是我们需要改变编程、设计思维的原因。 

4、HtmlImage控件 
在一些新闻网站和图片网站中，我们有时候需要查找、显示很多图片，这些图片一般我们是直接显示出来，当图片比较多的情况下，直接显示出来就会增加网页文件大小，消耗用户时间。所以，这时候，我们可以直接给用户一个图片下拉选择框来选择真正需要显示的图片。下面的举例就是这样，由用户选择来显示图片： 
<html> 
<head> 
<title>HtmlImage试验</title> 
<script language="C#" runat="server"> 
void chgImage (Object Sender, EventArgs e) { 
Image.Src= ImgSelector.Value; 
} 
</script> 
</head> 

<body> 
<form runat="server"> 

<img id="Image" runat="server"  
src="top.gif" /> 

<p>选择图片: </p> 

<select id="ImgSelector" runat="server"> 
<option value="Cereal1.gif">Healthy Grains</option> 
<option value="warning.gif">warning</option> 
<option value="Cereal3.gif">U.F.O.S</option> 
<option value="Cereal4.gif">Oatey O's</option> 
<option value="x.gif">Strike</option> 
<option value="Cereal7.gif">Fruity Pops</option> 
</select> 

<input type=submit runat="server" value="显示" onServerClick="chgImage"> 

</form> 
</div> 
</body> 
</html> 
程序执行效果如下： 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消


以上程序演示了使用HTMLImage控件实现选择显示图片的功能，我们注意到，在使用HTMLImage控件的时候，图片的路径可以作为控件的一个属性来设置，这样，我们就可以很简单的实现类似以上程序的许多功能。 

5、HtmlTable控件 
我们知道，在HTML中使用Table的时候，Table是已经指定而且不能动态改变的；在ASP中，要实现Table的动态载入也比较困难。在使用HTMLTable的时候，我们就可以很简单的实现表、表格行和表格单元格的动态生成，因为表格行和表格单元格都已经作为控件，我们可以通过对这些控件的灵活使用来生成动态表格。在以下的举例中，用户选择表格的行数和列数来实现动态生成表格： 
<html> 
<head> 
<title>HTMLTable试验</title> 
<script language="C#" runat="server"> 
void Page_Load(Object sender, EventArgs e) { 
int row=0; 


int numrows=int.Parse(setRows.Value); 
int numcells=int.Parse(setCols.Value); 

for (int j=0; j<numrows; j++) { 
HtmlTableRow r=new HtmlTableRow(); 


if (row%2 == 1) r.BgColor="Gainsboro"; 
row++; 

for (int i=0; i<numcells; i++) { 
HtmlTableCell c=new HtmlTableCell(); 
c.Controls.Add(new LiteralControl("row " + j.ToString() + ", cell " + i.ToString())); 
r.Cells.Add(c); 
} 

Table1.Rows.Add(r); 
} 
} 
</script> 
</head> 

<body> 
<Center> 
<form runat="server"> 

<p><table id="Table1" cellpadding=5 cellspacing=0  
border=1 bordercolor="black" runat="server" /></p> 

<table> 
<tr> 
<td>表格行数:</td> 
<td> 
<select id="setRows" runat="server"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select></td> 
<td>表格列数:</td> 
<td> 
<select id="setCols" runat="server"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select></td></tr> 
</table> 

<p><input type=submit value="生成表格" runat="server"> 

</form> 
</Center> 
</body> 
</html> 
程序执行效果如下： 转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消




在以上图片中，程序动态生成一个两行三列的表格。在学习使用HTMLTable的时候，需要真正了解表格是怎样生成的，这一点，我们可以参考上面程序的实现方式。HTMLTable的应用非常广泛，特别是网页结合数据库的时候，这种动态生成Table的设计方法更加必不可少。 

三、总结 
HTML控件是ASP.NET的主要部分之一，利用这些控件，我们在设计中可以实现很多我们以前完全不敢想或者很难实现的功能。