如何在多个页面上拆分带有验证的表单答案

【问题标题】：How to split a form with validation on several pages如何在多个页面上拆分带有验证的表单
【发布时间】：2020-02-28 13:59:10
【问题描述】：

我有一个带有 EditForm 和 DataAnnotationValidator 用于验证的服务器端 Blazor 应用程序。我想将表单拆分为多个页面，每个页面上都有一个后退和前进按钮，前进按钮应该只验证当前页面上的字段。

目前，我使用检查“页面”变量的 switch 语句实现了表单拆分。如果单击前进按钮，页面会增加，并且在页面重新呈现后，会显示其他字段。但是我不能只验证一个页面，因为验证器会验证整个模型，所以我无法区分有效页面和无效页面。

我是否必须为每个页面使用 EditForm，并在仅包含当前页面字段的子模型上使用验证器，或者是否有其他更优雅的解决方案。

【问题讨论】：

标签： blazor

【解决方案1】：

您可以尝试 Isaacs 答案，也可以另辟蹊径，为每个选项卡创建不同的编辑表单。我不知道哪个最好。查看 Chris Sainty 发表的关于流畅验证的这篇文章。

Article Here

理论上，您可以为每个选项卡创建一个仅处理其自己的选项卡验证的验证器

【讨论】：

欢迎来到 SO！基于实时链接的答案是有风险的，因为它们可能会消失。添加链接的一些内容以防万一它死了。
我尝试了 Fluent Validation，这几乎是我所希望的。我唯一的问题是，当我单击下一页的按钮时，会发生验证，并且只有在输入有效时才更改页面。但是，如果我没有在必填字段中输入内容，则不会收到 ValidationMessage。如果我输入了某些内容，我只会收到 ValidationMessage。所以ValidateField方法有效，但是ValidateModel方法的ValidationMessageStore好像坏了或者不知道怎么正确使用。

【解决方案2】：

我猜你可以使用模板化组件来实现它。 Here is a link 到 Steve Anderson 创建的 TabSet 示例，您可以模仿它来设计您的输入表单。该示例相对较旧，您可能需要对其进行调整（命名空间、生命周期事件的名称等）。您不必将您的输入表单设计为 TabSet，尽管许多人这样做，但原理是相同的。您显示一个选项卡并隐藏其他选项卡...也就是说，从一个页面或部分移动到下一个。

注意：您的输入表单保持在同一个页面上（组件页面，具有@page 指令和路由模板的组件）。您不必为报名表的每个部分都创建一个页面，因为您可能已经这样做了...

我相信您不必为每个选项卡（您的输入表单的一部分）添加一个 EditForm。您可以使用 EditForm 组件包装 TabSet（或任何您称之为该组件的组件）。

为了部分验证您的数据输入表单，您需要通过调用 EditContext.Validate 方法手动执行验证。

在我看来，这可以很好地工作。请报告您的预付款。我很好奇我的建议是否真的很常见。

希望这会有所帮助...

【讨论】：

我尝试了 TabSet，但我更喜欢单独的页面。我现在使用 Fluent Validator 手动验证我的模型，如下面的答案中所建议的那样。但是我仍然对 ValidationMessage 有一个小问题（有关更多信息，请参见下面的答案）
TabSet 示例旨在演示如何处理一组内容（片段 html 和文本等），如何从一组移动到另一组，等等。 TabSet 位于单个 Component 页面（带有@page 指令和路由模板的组件），它由 Tab 组件组成，由 css 排列并由 C# 操作。您可以通过更改一个或两个 css 规则的值以不同的方式重新排列 Tab 组件，因此它们对您来说看起来像页面。请注意，您使用的是 Blazor；这是一个 SPA。没有页面可以来回移动。这不是 Razor 页面或 mvc
我知道 Blazor 是一个 SPA，并且具有不同的页面，我的意思是一个页面具有不同的内容，这些页面基于一个 int 变量“Page”和一个 switch 语句来显示。这在我的情况下工作正常，因此我不打扰 TabSet。剩下的唯一问题是 ValidationMessages 仅在验证字段时显示，而不是在验证整个模型或子模型时显示（当我单击下一步进入下一个“页面”时我会这样做）。

【解决方案3】：

我正面临这个问题，但在 jquery 中通过表单中的单个或一组控件验证来实现。但 blazor 不支持，因为它只验证所有字段。如果要验证特定控件，这是不可能的。

Ericgrantholland 通过单独的表格回答了这个问题。这是个好主意。这非常有用。但是单个字段验证使用许多其他地方，例如我想单击一个名为“与帐单地址相同”的复选框按钮，它将通过验证任务将帐单地址控件的数据填充到发货地址控件。我如何通过 blazor 实现这一目标？

如果 blazor 支持单个字段验证，例如代码 $('#ShippingInfo').validate().element('#ShippingAddress_StateID')，我可以实现任何事情。

【讨论】：

查看FluentValidation。使用 FluentValidation，您可以编写自己的验证器。