如何在多个页面上通过验证拆分表格

Question

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

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

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

Answer 1

我想您可以使用模板化组件来实现。 Here is a link到由史蒂夫·安德森（Steve Anderson）创建的TabSet示例中，您可以模拟该示例来设计输入表单。该示例相对较旧，您可能需要对其进行调整（名称空间，生命周期事件的名称等）。您不必将输入表单设计为TabSet，尽管很多这样做，但是原理是相同的。您显示一个选项卡，然后隐藏其他选项卡……也就是说，从一个页面或部分移至下一页。

注意：您的输入表单保留在同一页面上（组件页面，具有@page指令和路由模板的组件）。您不会像您已经完成的那样为报名表的每个部分创建一个页面。

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

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

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

希望这对您有帮助...

Answer 2

您可以尝试以撒的答案，也可以走另一条路线，并为每个选项卡创建不同的编辑形式。我不知道哪个最好。查看Chris Sainty撰写的有关流畅验证的文章。

Article Here

从理论上讲，您可以为仅处理自己的标签验证的每个标签创建一个验证器

Answer 3

我正面临着这个问题，但是在jquery中通过单个或一组控件验证以某种形式实现。但是，blazor不支持，因为它仅验证所有字段。如果要验证特定控件，则不可能。

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

如果blazor支持单个字段验证，例如代码$（'＃ShippingInfo'）。validate（）。element（'＃ShippingAddress_StateID'），我可以实现任何目标。