ASP.NET Core 中 select 选择器验证

Author Image
admin Sunday, May 10, 2020 阅读数: 149

ASP.NET Core 中 select 选择器验证

本文作者:梁桐铭- 微软最有价值专家(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. 翻译为中文:- 值''无效。

    imags

但是我们在这里得到的错误不是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

文章说明

如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权
感谢您对我的支持

关注微信公众号:角落的白板报

公众号:角落的白板报