菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

ASP.NET 教程

ASP.NET Web Forms – Validation 服务器控件

likuolei

ASP.NET Web Forms – 验证控件（Validation Controls）完全实战手册

ASP.NET Web Forms 的验证控件是它最经典、最省代码的功能之一。
只要拖几个验证控件 + 设置几个属性，零 JavaScript 就能实现强大且统一的客户端 + 服务端双重验证！

6 大验证控件一览表（记住这 6 个就够用 99% 的场景）

控件名称标签主要用途关键属性
RequiredFieldValidator<asp:RequiredFieldValidator>必填验证ControlToValidate、ErrorMessage
CompareValidator<asp:CompareValidator>比较验证（等于某值、大于、大于等于等）ControlToValidate、Operator、ValueToCompare / ControlToCompare
RangeValidator<asp:RangeValidator>范围验证（数字、日期、字母区间）MinimumValue、MaximumValue、Type
RegularExpressionValidator<asp:RegularExpressionValidator>正则表达式验证（邮箱、手机号、身份证等）ValidationExpression
CustomValidator<asp:CustomValidator>自定义验证逻辑（最强大）ClientValidationFunction / ServerValidate
ValidationSummary<asp:ValidationSummary>汇总显示所有错误消息DisplayMode、ShowMessageBox

核心属性共性（所有验证控件都有）

属性说明
ControlToValidate要验证的目标控件 ID（必填）
ErrorMessage错误消息（会显示在 ValidationSummary 和控件旁边）
Text控件本身显示的内容（常用于 * 号）
ForeColor错误文字颜色
DisplayNone（不占位） / Static（占位） / Dynamic（动态占位，推荐）
EnableClientScript是否启用客户端验证（默认 true）
SetFocusOnError验证失败时自动聚焦到出错控件
ValidationGroup分组验证（一个页面多个表单互不干扰）

终极实战：完整用户注册表单（包含全部 6 种验证 + 分组 + 汇总）

RegisterWithValidation.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterWithValidation.aspx.cs" 
    Inherits="WebFormsDemo.RegisterWithValidation" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET 验证控件完整实战</title>
    <style>
        body { font-family: Arial; margin: 40px; background: #f9f9f9; }
        .box { width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
        .row { margin: 15px 0; }
        label { display: inline-block; width: 120px; }
        input[type=text], input[type=password], select { width: 250px; padding: 8px; }
        .err { color: #d00; font-size: 0.9em; }
        .summary { background: #ffe6e6; border: 1px solid #fbb; padding: 15px; margin: 20px 0; border-radius: 5px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="box">
            <h2 style="text-align:center">用户注册（全验证控件演示）</h2>

            <div class="row">
                <label>用户名：</label>
                <asp:TextBox ID="txtUser" runat="server" />
                <asp:RequiredFieldValidator ID="rfvUser" ControlToValidate="txtUser"
                    ErrorMessage="用户名不能为空" Text="*" ForeColor="Red" Display="Dynamic" runat="server" />
                <asp:RegularExpressionValidator ID="revUser" ControlToValidate="txtUser"
                    ValidationExpression="^[a-zA-Z0-9_]{4,16}$"
                    ErrorMessage="用户名 4-16 位，只能包含字母数字下划线" Text="格式错误" 
                    ForeColor="Red" Display="Dynamic" runat="server" />
            </div>

            <div class="row">
                <label>密码：</label>
                <asp:TextBox ID="txtPass" TextMode="Password" runat="server" />
                <asp:RequiredFieldValidator ID="rfvPass" ControlToValidate="txtPass"
                    ErrorMessage="密码必填" Text="*" ForeColor="Red" runat="server" />
            </div>

            <div class="row">
                <label>确认密码：</label>
                <asp:TextBox ID="txtPass2" TextMode="Password" runat="server" />
                <asp:RequiredFieldValidator ID="rfvPass2" ControlToValidate="txtPass2"
                    ErrorMessage="请再次输入密码" Text="*" ForeColor="Red" runat="server" />
                <asp:CompareValidator ID="cvPass" ControlToValidate="txtPass2"
                    ControlToCompare="txtPass" Operator="Equal"
                    ErrorMessage="两次密码不一致" Text="不一致" ForeColor="Red" runat="server" />
            </div>

            <div class="row">
                <label>年龄：</label>
                <asp:TextBox ID="txtAge" runat="server" Text="18" />
                <asp:RangeValidator ID="rvAge" ControlToValidate="txtAge"
                    MinimumValue="1" MaximumValue="120" Type="Integer"
                    ErrorMessage="年龄必须在 1-120 之间" Text="范围错误" ForeColor="Red" runat="server" />
            </div>

            <div class="row">
                <label>邮箱：</label>
                <asp:TextBox ID="txtEmail" runat="server" />
                <asp:RequiredFieldValidator ID="rfvEmail" ControlToValidate="txtEmail"
                    ErrorMessage="邮箱必填" Text="*" ForeColor="Red" runat="server" />
                <asp:RegularExpressionValidator ID="revEmail" ControlToValidate="txtEmail"
                    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                    ErrorMessage="邮箱格式不正确" Text="格式错误" ForeColor="Red" runat="server" />
            </div>

            <div class="row">
                <label>手机号：</label>
                <asp:TextBox ID="txtMobile" runat="server" />
                <asp:RegularExpressionValidator ID="revMobile" ControlToValidate="txtMobile"
                    ValidationExpression "^1[3-9]\d{9}$"
                    ErrorMessage="请输入正确的手机号" Text="手机号错误" ForeColor="Red" runat="server" />
            </div>

            <div class="row">
                <label>验证码：</label>
                <asp:TextBox ID="txtCode" runat="server" Width="100px" />
                <img src="VerifyCode.aspx" alt="验证码" style="vertical-align:middle;" />
                <asp:CustomValidator ID="cvCode" ControlToValidate="txtCode"
                    ErrorMessage="验证码错误" Text="错误" ForeColor="Red"
                    OnServerValidate="cvCode_ServerValidate"
                    ClientValidationFunction="checkCode" runat="server" />
            </div>

            <div class="row">
                <asp:Button ID="btnRegister" Text="立即注册" runat="server" 
                    OnClick="btnRegister_Click" ValidationGroup="Register" />
                <asp:Button ID="btnReset" Text="重置" runat="server" CausesValidation="false" />
            </div>

            <!-- 错误汇总（两种风格） -->
            <asp:ValidationSummary ID="vsAll" runat="server" 
                HeaderText="请更正以下错误：" CssClass="summary"
                DisplayMode="BulletList" ShowMessageBox="false" ShowSummary="true" />

            <!-- 弹窗式汇总（非常炫酷） -->
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                ShowMessageBox="true" ShowSummary="false" />
        </div>
    </form>

    <!-- 客户端验证码验证函数（配合 CustomValidator） -->
    <script type="text/javascript">
        function checkCode(source, args) {
            // 这里简单演示：假设验证码为 1234（实际应从 Session 取）
            args.IsValid = (args.Value === "1234");
        }
    </script>
</body>
</html>

RegisterWithValidation.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebFormsDemo
{
    public partial class RegisterWithValidation : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // 模拟验证码（实际项目请用专门的 VerifyCode.aspx 生成图片 + Session 存储）
                Session["VerifyCode"] = "1234";
            }
        }

        // CustomValidator 服务端验证
        protected void cvCode_ServerValidate(object source, ServerValidateEventArgs args)
        {
            args.IsValid = string.Equals(args.Value, Session["VerifyCode"]?.ToString(), 
                                       StringComparison.OrdinalIgnoreCase);
        }

        protected void btnRegister_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)  // 这句就是所有验证控件最终大闸！
            {
                // 所有验证都通过，才会执行到这里
                Response.Write("<script>alert('注册成功！欢迎加入！');</script>");
                // 这里可以写入数据库...
            }
        }
    }
}

关键技巧总结

技巧说明
Page.IsValid必须写！即使客户端验证通过，服务端也一定要再判断一次
CausesValidation=”false”重置、取消、返回等按钮一定要加这个属性，防止触发验证
ValidationGroup一个页面多个表单时必用（每个按钮和验证控件都要设置相同组名）
Display=”Dynamic”推荐！错误消息只在出错时才占位，布局不会乱跳
CustomValidator最强大，可以配合 AJAX 验证用户名是否已存在、身份证校验等

只要掌握了这 6 个验证控件 + Page.IsValid + ValidationGroup，你就能轻松做出任何复杂的企业级表单验证，比写一堆 jQuery 代码快 10 倍！

需要我再给你：

  • AJAX 异步验证用户名是否存在的例子（配合 CustomValidator + UpdatePanel）
  • 多步骤向导注册（Wizard + 验证分组）
  • 验证控件自定义错误图标和动画

随时说，我继续发完整代码！

网站 http://yingjuxia.com
文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部