ASP.NET Core 中 select 选择器验证

admin

2021-06-03

本文作者：梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳：跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core

在本章节中，我们将讨论在ASP.NET Core中的<select>标签上实现所需的验证。

查看`<select>`标签示例

让我们通过一个例子来理解这一点。

请参考下图，我们需要将他们的主修科目字段修改为必填选项。在这些选项中，我们希望将请选择作为第一个选项。

imags

它不是一个有效的选项，它的作用只是为了提示用户选择一个有效的主修科目。在选择列表中有效的选择项是从MajorEnum枚举中获取来的。

 public enum MajorEnum
    {
        [Display(Name ="未分配")]
        None,
        [Display(Name = "一年级")]
        FirstGrade,
        [Display(Name = "二年级")]
        SecondGrade,
        [Display(Name = "三年级")]
        GradeThree
    }

Html 页面中的主修科目选择列表

注意，我们使用的是asp-itemsTagHelper 将主修科目列表绑定到MajorEnum 枚举。

<div class="form-group row">
  <label asp-for="Major" class="col-sm-2 col-form-label"></label>
  <div class="col-sm-10">
    <select
      asp-for="Major"
      class="custom-select mr-sm-2"
      asp-items="Html.GetEnumSelectList<MajorEnum>()"
    >
    </select>
  </div>
</div>

给选择列表增加第一个选择项

我们希望选择列表中的第一个选项是请选择。实现此目的的最简单方法是在选择列表 HTML 中包含<option>标签，如下所示。

<div class="form-group row">
  <label asp-for="Major" class="col-sm-2 col-form-label"></label>
  <div class="col-sm-10">
    <select
      asp-for="Major"
      class="custom-select mr-sm-2"
      asp-items="Html.GetEnumSelectList<MajorEnum>()"
    >
      <option value=""> 请选择</option>
    </select>
    <span asp-validation-for="Major" class="text-danger"></span>
  </div>
</div>

请选择选项的value属性设置为空字符串。我们还使用 asp-validation-for tag helper 来显示验证错误,并且将错误信息的颜色设置为红色。

使选择列表成为必填

public class Student
    {
        public int Id { get; set; }
        [Required(ErrorMessage ="请输入名字"), MaxLength(50, ErrorMessage = "名字的长度不能超过50个字符")]
        [Display(Name = "名字")]
        public string  Name { get; set; }
        [Required]
        [Display(Name = "主修科目")]
        public MajorEnum Major { get; set; }

        [Display(Name = "电子邮件")]
        [RegularExpression(@"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$",
        ErrorMessage = "邮箱的格式不正确")]
        [Required(ErrorMessage = "请输入邮箱地址")]
        public string Email { get; set; }
    }

如果我们现在运行项目并提交表单，而没有从选择列表中选择有效的主修科目，则会收到错误。

The value '' is invalid. 翻译为中文：- 值''无效。

但是我们在这里得到的错误不是Required验证失败的验证错误。为了证明这一点，从Student类的MajorEnum属性中删除[Required]属性，您仍然会得到相同的错误。

让我们首先理解为什么我们会收到此错误 -The value '' is invalid.

Major 属性的数据类型是 MajorEnum 枚举信息。
默认情况下，枚举基础数据类型为 int。
将空字符串设置为 HTML 中选择列表的请选择 选项的值。
因此，当从选择列表中选择此选项 请选择时，Major 的数据类型为int，而空字符串的数据类型为string。
显然，空字符串不是 int 的有效值。
这就是我们得到返回值- The value '' is invalid.的原因。
值类型(例如 int，float，decimal，DateTime)本身就是必需的，不需要添加 Required 属性。

让选择列表成为真正的必需验证

所以，如果通过包含问号而使 Major 属性成为可为空的属性，就需要添加[Required]属性才能使该字段成为必填字段。

 public class Student
    {
        public int Id { get; set; }
        [Required(ErrorMessage ="请输入名字"), MaxLength(50, ErrorMessage = "名字的长度不能超过50个字符")]
        [Display(Name = "名字")]
        public string  Name { get; set; }
        [Required]
        [Display(Name = "主修科目")]
        public MajorEnum? Major { get; set; }

        [Display(Name = "电子邮件")]
        [RegularExpression(@"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$",
        ErrorMessage = "邮箱的格式不正确")]
        [Required(ErrorMessage = "请输入邮箱地址")]
        public string Email { get; set; }
    }

如果我们现在选择"请选择"作为表单的选择项，我们会获得必填的验证错误，如下图：

imags