脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 基础应用 → Blazor数据验证

Blazor实现数据验证

 更新时间：2022年01月30日 10:10:16   作者：痕迹g  
这篇文章介绍了Blazor实现数据验证的方式，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Blazor 提供一组输入组件。 输入组件会将绑定字段数据处理到模型，并在提交窗体时验证用户输入。
下表显示了可用的输入组件:

EditForm

EditForm 组件通过 EditContext 包装这些输入组件并协调验证过程。 创建 EditForm 时，可以使用 Model 参数指
定要绑定到的模型实例。 验证通常是使用数据批注完成的，并且可以进行扩展。 若要启用基于数据批注的验证，请
将 DataAnnotationsValidator 组件添加为 EditForm 的子组件。 EditForm 组件提供了一个用于处理有效（
OnValidSubmit ）和无效（ OnInvalidSubmit ）提交的方便事件。 还有一个更通用的 OnSubmit 事件，可让你自行触发
和处理验证。若要显示验证错误摘要，请使用 ValidationSummary 组件。

DataAnnotationsValidator

DataAnnotationsValidator 组件使用数据注释将验证支持附加到级联的 EditContext。

  • 当用户从某个字段中跳出时，将执行字段验证。 在字段验证期间，DataAnnotationsValidator 组件将报告的所有验证结果与该字段相关联。
  • 当用户提交窗体时，将执行模型验证。 在模型验证期间，DataAnnotationsValidator 组件尝试根据验证结果报告的成员名称来确定字段。 与单个成员无关的验证结果将与模型而不是字段相关联。

ValidationSummary

ValidationSummary 组件用于汇总所有验证消息。

验证

下面示例演示一个EditForm验证Model参数 (为了便于测试,这里将实体模型写在了@code { } 当中)。

  • 在@code{} 当中,创建一个 Student类型,提供Code与Name属性
  • 在页面中定义EditForm, 绑定Model 与验证提交的方法HandleValidSubmit
  • EditForm中定义两个InputText用于接受输入内容
  • button按钮用于提交整个模型的数据
@page "/"
@using Microsoft.AspNetCore.Components.Forms 

    <EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputText  @bind-Value="@student.Code" />
        <InputText  @bind-Value="@student.Name" />
        <button type="submit">submit</button>
    </EditForm>

@code {
    @using System.ComponentModel.DataAnnotations;

    private Student student = new Student();
    private void HandleValidSubmit()
    {
        // Save the data
    }

    public class Student
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "必填项!")]
        public string Name { get; set; }

        [StringLength(2, ErrorMessage = "超出规定长度！")]
        public string Code { get; set; }
    }
}
  • 错误效果

若要显示验证错误摘要，请使用 ValidationSummary 组件。 若要显示特定输入字段的验证消息，请使用ValidationMessage 组件，并为指向相应模型成员的 For 参数指定 lambda 表达式。

基于上面的进行改造,如下所示。 (如果只是针对每个字段进行验证, 则无需在EditForm子集添加 ValidationSummary)

 <EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        @*<ValidationSummary />*@
        <InputText @bind-Value="@student.Code" />
        <ValidationMessage For="()=>student.Code" />


        <InputText @bind-Value="@student.Name" />
        <ValidationMessage For="()=>student.Name" />

        <button type="submit">submit</button>
    </EditForm>
  • 错误效果

嵌套验证

对于上面的单个实体验证,可以按照上面的做法进行, 但是考虑到实体中还包含其他类型的对象需要验证。
官方文档解释: 若要验证绑定模型的整个对象图（包括集合类型和复杂类型的属性），请使用试验性 Microsoft.AspNetCore.Components.DataAnnotations.Validation 包

安装NuGet包

Install-Package Microsoft.AspNetCore.Components.DataAnnotations.Validation

实验

  • 创建测试嵌套类型Student /Child
  • EditForm子集添加 ObjectGraphDataAnnotationsValidator
  • 改造后完整代码如下所示:
    @page "/"
<EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    <InputText @bind-Value="@student.Child.Code" />
    <ValidationMessage For="()=>student.Child.Code" />

    <InputText @bind-Value="@student.Child.Name" />
    <ValidationMessage For="()=>student.Child.Name" />

    <button type="submit">submit</button>
</EditForm>

@code {
    @using System.ComponentModel.DataAnnotations;

    private Student student = new Student();
    private void HandleValidSubmit()
    {
        // Save the data
    }

    public class Student
    {
        [ValidateComplexType]
        public Child Child { get; set; } = new Child();
    }

    public class Child
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "必填项!")]
        public string Name { get; set; }

        [StringLength(2, ErrorMessage = "超出规定长度！")]
        public string Code { get; set; }
    }
}

注意: 子集必须保证为实例, 否则会报异常提示。 如上: =new Child();

  • 测试效果:

到此这篇关于Blazor实现数据验证的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Asp.net请求处理之管道处理介绍

    Asp.net请求处理之管道处理介绍

    在了解Asp.net请求处理流程的过程中，个人认为有必要从源代码的角度来了解asp.net管道是怎么实现的,需要的朋友可以参考下
    2012-11-11
  • WPF图表LiveChart使用详解

    WPF图表LiveChart使用详解

    本文详细讲解了WPF图表LiveChart的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • .Net行为型设计模式之观察者模式（Observer）

    .Net行为型设计模式之观察者模式（Observer）

    这篇文章介绍了.Net行为型设计模式之观察者模式（Observer），文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • ABP框架的基础配置及依赖注入讲解

    ABP框架的基础配置及依赖注入讲解

    这篇文章主要介绍了ABP框架的基础配置及依赖注入讲解,是ABP框架上手使用的基本,要的朋友可以参考下
    2016-06-06
  • 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步

    一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步

    由于我们仅仅是项目中的一个小部分，但也差不多按照以上的顺序进行开发，这是一个良好的习惯。我们将概要设计和详细设计放在一起。
    2010-07-07
  • ASP.NET缓存介绍

    ASP.NET缓存介绍

    缓存是在内存存储数据的一项技术，也是ASP.NET中提供的重要特性之一。例如你可以在复杂查询的时候缓存数据，这样后来的请求就不需要从数据库中取数据，而是直接从缓存中获取。通过使用缓存可以提高应用程序的性能
    2012-04-04
  • 详解ABP框架中的数据过滤器与数据传输对象的使用

    详解ABP框架中的数据过滤器与数据传输对象的使用

    ABP框架是一个基于ASP.NET的Web开发框架,这里我们来详解ABP框架中的数据过滤器与数据传输对象的使用,需要的朋友可以参考下
    2016-06-06
  • ASP.NET常用函数(推荐)

    ASP.NET常用函数(推荐)

    ASP.NET常用函数(推荐)...
    2006-09-09
  • ASP.Net Core MVC基础系列之环境设置

    ASP.Net Core MVC基础系列之环境设置

    这篇文章介绍了ASP.Net Core MVC环境设置的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-02-02
  • ASP.NET MVC中_ViewStart.cshtml作用介绍

    ASP.NET MVC中_ViewStart.cshtml作用介绍

    这篇文章介绍了ASP.NET MVC中_ViewStart.cshtml的作用，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03

最新评论