面试题：C#的ASP.NET Web应用开发之数据验证

Question

在C#的ASP.NET Web应用中，如何实现客户端和服务器端的数据验证？请分别阐述使用的技术和方法，并举例说明如何处理验证失败的情况。

Answer 1

客户端数据验证

• 使用技术：HTML5 自带验证属性、JavaScript 脚本库（如 jQuery Validate）。
• 方法：
  • HTML5 自带验证属性：例如使用 required 属性确保输入框必填，pattern 属性匹配正则表达式。

  <input type="text" name="username" required pattern="[a-zA-Z]{3,10}" />
  

  • jQuery Validate：先引入 jQuery 和 jQuery Validate 库，然后通过编写规则和消息来验证。

  <script src="jquery.min.js"></script>
  <script src="jquery.validate.min.js"></script>
  <form id="myForm">
      <input type="text" name="username" class="required" minlength="3" />
      <input type="submit" value="提交" />
  </form>
  <script>
      $(document).ready(function () {
          $("#myForm").validate();
      });
  </script>
  

• 验证失败处理：HTML5 自带验证属性验证失败时，浏览器会弹出默认提示框；jQuery Validate 验证失败时，会在输入框旁显示自定义的错误消息。

服务器端数据验证

• 使用技术：ASP.NET 提供的验证控件（如 RequiredFieldValidator、RegularExpressionValidator 等）、模型绑定验证（DataAnnotations 特性）。
• 方法：
  • ASP.NET 验证控件：在 ASPX 页面添加验证控件。

  <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
  <asp:RequiredFieldValidator ID="rfvUsername" runat="server" ControlToValidate="txtUsername" ErrorMessage="用户名不能为空"></asp:RequiredFieldValidator>
  

  • 模型绑定验证（DataAnnotations 特性）：在模型类上添加特性。

  public class User
  {
      [Required(ErrorMessage = "用户名不能为空")]
      [StringLength(10, MinimumLength = 3, ErrorMessage = "用户名长度必须在3到10之间")]
      public string Username { get; set; }
  }
  

  在控制器中验证模型状态。

  [HttpPost]
  public ActionResult Create(User user)
  {
      if (ModelState.IsValid)
      {
          // 保存数据等操作
          return RedirectToAction("Index");
      }
      return View(user);
  }
  

• 验证失败处理：ASP.NET 验证控件验证失败时，会在页面上显示错误消息；模型绑定验证失败时，ModelState.IsValid 为 false，可以通过 ModelState 获取错误信息并返回视图给用户。