Blazor University (31)表单 —— 验证

原文链接:https://blazor-university.com/forms/validation/

验证

源代码[1]

DataAnnotationsValidator 是 Blazor 中的标准验证器类型。在 EditForm 组件中添加此组件将启用基于 System.ComponentModel.DataAnnotations.ValidationAttribute 的 .NET 属性的表单验证。

首先,我们将创建一个简短的示例,然后我们将了解幕后发生的事情。首先,创建一个我们可以编辑的模型,并用一些数据注释装饰它的属性以进行验证。

public class Person
{[Required]public string Name { get; set; }[Range(18, 80, ErrorMessage = "Age must be between 18 and 80.")]public int Age { get; set; }
}
  • 第 3 行指定 Name 属性不能为 null 或为空。

  • 第 5 行为 Age 属性指定了一个有效的值范围(从 18 到 80),并且还提供了一个合适的错误消息来显示给用户。

添加验证

在默认 Blazor 应用中编辑 Index.razor 页面,并提供一些标记来编辑 Person 的实例。

<EditForm Model=@Person><div class="form-group"><label for="Name">Name</label><InputText @bind-Value=Person.Name class="form-control" id="Name" /></div><div class="form-group"><label for="Age">Age</label><InputNumber @bind-Value=Person.Age class="form-control" id="Age" /></div><input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>@code {Person Person = new Person();
}

现在运行应用程序将导致向用户显示一个不验证其输入的表单。为了确保表单得到验证,我们必须指定一个验证机制。在 EditForm 组件内添加一个 DataAnnotationsValidator 组件。

<EditForm Model=@Person><DataAnnotationsValidator/><div class="form-group"><label for="Name">Name</label><InputText @bind-Value=Person.Name class="form-control" id="Name" /></div><div class="form-group"><label for="Age">Age</label><InputNumber @bind-Value=Person.Age class="form-control" id="Age" /></div><input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

运行应用程序并单击“保存”按钮将更新用户界面,以提供用户输入中存在错误的视觉指示。

18baa61d83e49c9da519f56fa0857175.png

显示验证错误消息

可以通过两种方式向用户显示验证错误消息。我们可以添加一个 ValidationSummary 来显示表单中所有错误的完整列表。我们还可以使用 ValidationMessage 组件来显示表单上特定输入的错误消息。这些组件不是相互排斥的,因此可以同时使用它们。

ValidationSummary 组件可以简单地放入我们标记中的 EditForm 中;根本不需要额外的参数。

5c53168947d74eb62faf731626a3db2d.png

由于 ValidationMessage 组件显示单个字段的错误消息,它要求我们指定字段的标识。为了确保我们的参数值在重构后保持正确(例如,当我们重构 Person 类的属性名称时)Blazor 要求我们在识别字段时指定一个表达式。名为 For 的参数在 ValidationMessage 上定义如下:

[Parameter]
public Expression<Func<T>> For { get; set; }

这意味着我们应该使用 lambda 表达式来指定字段的标识,该表达式可以“双引号”或包裹在 @(...)

  • 双引号

    <ValidationMessage For="() => Person.Name"/>
  • Razor 表达式

    <ValidationMessage For=@( () => Person.Name )/>

两种形式是等价的。带引号的形式更容易阅读,而 razor 表达式使其他开发人员更清楚我们定义的是表达式而不是字符串。

@page "/"
@using Models<EditForm Model=@Person><DataAnnotationsValidator/><ValidationSummary/><div class="form-group"><label for="Name">Name</label><InputText @bind-Value=Person.Name class="form-control" id="Name" /><ValidationMessage For="() => Person.Name"/></div><div class="form-group"><label for="Age">Age</label><InputNumber @bind-Value=Person.Age class="form-control" id="Age" /><ValidationMessage For=@(() => Person.Age) /></div><input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>@code {Person Person = new Person();
}

7e1bcd13e03a8f4116a447d466aa65d6.png

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/ValidatingUserInput

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/285764.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSDN,CNBLOGS博客文章一键转载插件 终于更新了!

之前&#xff0c;Shawn Chou等朋友一直建议插件支持cnblogs文章转载&#xff0c;但一直没时间修改插件&#xff0c;今天晚上抽时间将插件进行了升级&#xff0c;可以支持 CSDN,CNBLOGS博客文章的一键转载。时间仓促&#xff0c;难免有各种问题&#xff0c;欢迎提出建议&#xf…

ROS2_Control官方资料+运动控制

Getting Started — ROS2_Control: Rolling Dec 2023 documentation Getting Started Edit on GitHub Youre reading the documentation for a development version. For the latest released version, please have a look at Iron. Getting Started Installation Binar…

三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》

注&#xff1a;本系列教程需要对应 JavaScript 、html、css 基础&#xff0c;否则将会导致阅读时困难&#xff0c;本教程将会从 ECharts 的官方示例出发&#xff0c;详解每一个示例实现&#xff0c;从中学习 ECharts 。 ECharts 官方示例&#xff1a;https://echarts.apache.o…

C语言试题八十二之输入小写字母,把小写字母转换成大写字母。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 输入小写字…

Serv-U服务器的管理3

&#xff18;&#xff0e;编辑&#xff29;&#xff30;访问规则对于某些扰乱服务器秩序但又不方便删除其账户的用户&#xff0c;可以利用“编辑&#xff29;&#xff30;访问规则”允许或阻止特定的&#xff29;&#xff30;访问。&#xff33;&#xff45;&#xff52;&#…

【ArcGIS风暴】什么是点云?什么是Las数据集?一篇文章告诉你点云数据的奥秘

摄影测量Pix4d等软件,或激光雷达数据一般都是LAS格式的点云数据,有很大的适用范围和优点,那么,到底什么是LAS数据集呢,一文告诉你LAS数据集的来龙去脉。 扩展阅读: 什么是点云?什么是Las数据集?一篇文章告诉你点云数据的奥秘 ArcGIS+CASS点云(.las)数据生成等高线方法案…

试用了多款报表工具,终于找到了基于.Net 6开发的一个了

Part1前言上一个月有一个项目需要用到数据分析&#xff0c;将老板感兴趣的数据给他整理成一个面板&#xff0c;方便他实时查看&#xff0c;于是自己了解到了BI,当时我们项目就用了metabase&#xff0c;metabase是一款开源的BI分析工具&#xff0c;开发语言clojureReact为主。就…

4种CSS文字竖排方法

2019独角兽企业重金招聘Python工程师标准>>> 有时候&#xff0c;我们需要对网页某个区域的文字竖排&#xff0c;竖向排列&#xff0c;横向的当然大家都见惯了&#xff0c;对于竖排&#xff0c;一时间找不到思路了&#xff0c;呵呵&#xff0c;其实和横排一样简单&am…

知道这20个正则表达式,能让你少写1,000行代码

正则表达式&#xff0c;一个十分古老而又强大的文本处理工具&#xff0c;仅仅用一段非常简短的表达式语句&#xff0c;便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话&#xff0c;能够使你的开发效率得到极大的提升。 正则表达式经常被用于字段或任意字符串的…

Android之SwipeRefreshLayout嵌套RecyclerView遇到的坑

1 、需求 RecyclerView多布局里面加入SwipeRefreshLayout实现下拉刷新 2、关键代码 <androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:id="@+id/mainRefresh"android:layout_width="match_parent"android:layout_height="0dp"…

TCP连接出现大量TIME_WAIT的解决办法

一个TCP/IP连接断开以后&#xff0c;会通过TIME_WAIT的状态保留一段时间&#xff0c;时间过了才会释放这个端口&#xff0c;当端口接受的频繁请求数量过多的时候&#xff0c;就会产生大量的TIME_WAIT状态的连接&#xff0c;这些连接占着端口&#xff0c;会消耗大量的资源。面对…

【ArcGIS风暴】ArcGIS10.6创建LAS数据集的两种方法并加载点云数据

文章目录 1. 使用上下文菜单创建 LAS 数据集2. 使用地理处理工具创建 LAS 数据集3. 显示LAS数据集LAS 数据集是位于文件夹中的独立文件,并且引用 LAS 格式的激光雷达数据和用于定义表面特征的可选表面约束要素。可使用创建 LAS 数据集工具或 ArcCatalog 中文件夹的上下文菜单快…

关于建立北京市专业技术人员职业资格与职称对应关系的通知

原文地址 http://www.bjrbj.gov.cn/xxgk/gsgg/201906/t20190605_82857.html 附件 北京市专业技术人员职业资格与职称对应表 &#xff08;46项&#xff09; 一、准入类职业资格 序号 资格名称 可聘专业技术职务 1 注册消防工程师 一级注册消防工程师&#xff1a;工程师 二…

基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译

系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客&#xff1f;基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.N…

C语言试题八十三之输出左下三角形九九乘法表

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 输出左下三…

Android SDK目录结构

1、add-ons这里面保存着附加库&#xff0c;比如GoogleMaps&#xff0c;当然你如果安装了OphoneSDK&#xff0c;这里也会有一些类库在里面。 2、docs这里面是Android的帮助文档&#xff0c;Android开发所有API都在里面。 3、platforms是每个平台的SDK真正的文件&#xff0c;里面…

【Pix4d精品教程】Pix4d项目空三结果精度评估完整解决方案

《无人机航空摄影测量精品教程》合集目录(Pix4d、CC、EPS、PhotoScan、Inpho) 文章目录 一、单体项目评估二、整体项目评估在航测项目内业工作中,不管是垂直摄影,还是倾斜摄影,最核心的部分是空三加密,一个很重要的基础是共线方程。空三结果的精度是航测的基本要求,也会…

2016 10 26考试 NOIP模拟赛 杂题

Time 7&#xff1a;50 AM -> 11&#xff1a;15 AM 感觉今天考完后&#xff0c;我的内心是崩溃的 试题考试包 T1&#xff1a; 首先看起来是个贪心&#xff0c;然而&#xff0c;然而&#xff0c;看到那个100%数据为n < 2000整个人就虚了&#xff0c;发呆接近两小时后意识到…

2016 CCPC 杭州

A - ArcSofts Office Rearrangement 均分石子。 好像怎么分答案都一样&#xff0c;于是模拟一遍。 #include <bits/stdc.h>using namespace std; typedef long long ll;template<typename T> inline void read(T &x){ x0;T f1;char ch;do{chgetchar();if(ch-)f…

[转]RxHttp 一条链发送请求,新一代Http请求神器(一)

简介 RxHttp是基于OkHttp的二次封装&#xff0c;并于RxJava做到无缝衔接&#xff0c;一条链就能发送一个完整的请求。主要功能如下&#xff1a; 支持Get、Post、Put、Delete等任意请求方式&#xff0c;可自定义请求方式支持Json、DOM等任意数据解析方式&#xff0c;可自定义数据…