Blazor 中的 HTML5 验证

Question

我试图让内置的 HTML5 验证在我的 Blazor 应用程序中工作，但它只是被忽略了。

这是我的 Razor 代码

<form class="row">
            <div class="form-row">
                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" @bind="@details.Email">
            </div>
            <div class="form-row">
                <label for="exampleFormControlInput1" class="form-label">Phone</label>
                <input type="tel" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" @bind="@details.Phone">
            </div>
            <div class="form-row">
                <button type="submit" class="btn btn-primary" @onclick="SubmitForm">Send</button>
            </div>
        </form>

</div>
@code {
    private ContactDetails details = new ContactDetails();

    public async void SubmitForm()
    {
        var result = await Http.PostAsJsonAsync("Contact", details);
    }

}

我知道我可以使用 Blazors 验证，但我只想为此使用内置的 HTML5 验证，因为它是一个非常基本的表单。如果触发了 HTML5 验证，如何停止运行 SubmitForm 代码？

如果我从 SubmitForm() 方法中删除代码，那么当它进入该方法并返回网页并显示 html5 验证消息时，显然什么都不会发生，但显然该方法仍在被触发。如果出现 html5 验证错误，有没有办法停止代码运行？

Answer 1

好的，我已经弄清楚了如何做到这一点。

只需将 onsubmit 事件添加到 Form 标签，然后从按钮中删除 onclick。

<form class="row" @onsubmit="SubmitForm">

然后按预期工作。

现在使用内置的 Blazor 表单组件显然有很多好处，但有时只需要使用标准的 html 表单，幸运的是有一个解决方案可以做到这一点。