如何在按钮单击时使用 HTML 表单验证？答案

【问题标题】：How to use HTML form validation on button click?如何在按钮单击时使用 HTML 表单验证？
【发布时间】：2020-12-09 16:56:17
【问题描述】：

我正在使用 SyncFusion 和 Blazor 创建一个应用程序。在这个应用程序中，我有一个如下所示的登录页面：

使用此代码：

<EditForm Model="@ModelValue">
    <SfTextBox @ref="user" Placeholder="E-mail" Created="@onCreateUser" CssClass="custom-login" Type="InputType.Email" @bind-Value="@ModelValue.Email" required></SfTextBox>


    <SfTextBox @ref="password" Placeholder="Password" Created="@onCreatePassword" CssClass="custom-login" Type="InputType.Password" @bind-Value="@ModelValue.Password" required minlength="7"></SfTextBox>

    <SfCheckBox Label="Stay Signed In" @bind-Checked="rememberUser" CssClass="stay-signed-in-checkbox"></SfCheckBox>
    <SfButton CssClass="forgot-password-button">Forgot Password?</SfButton>

     <SfButton CssClass="login-button" OnClick="validateForm">LOGIN</SfButton>
</EditForm>

@code {
SfTextBox user;
SfTextBox password;
private bool rememberUser;
private User ModelValue = new User();

public void validateForm()
{ 

}

/*ICON*/
public void onCreateUser()
{
    this.user.AddIcon("prepend", "oi oi-person");
}

public void onCreatePassword()
{
    this.password.AddIcon("prepend", "oi oi-key");
}
}

在此表单中（自动）应用了 html 浏览器验证弹出窗口。这些工作在我的情况下有点奇怪，因此我正确地创建了一个视频插图：

https://drive.google.com/file/d/1PhETRPkgDag_DHWYlBFJL1qnodxDpaQ_/view?usp=sharing

您可以看到电子邮件字段工作正常，每次按下按钮时都会进行 html 表单验证。在密码字段中，情况并非如此，至少需要 7 个字符，当我按下提交按钮时只填写了 3 个字符，我没有收到任何警告。

有人知道如何解决这个问题吗？

【问题讨论】：

标签： c# html forms validation blazor

【解决方案1】：

如果您想使用 html5 表单验证，minlengthattribute 将不起作用。如果您想进行该验证，您应该使用pattern 属性并像pattern=".{7,}" 一样传递它。这在this answer 中有解释。

如果您想使用 blazor 验证（更好且推荐），您需要在 User 模型中使用数据注释。

对于您的特定情况，您可以使用MinLength 属性。

public class User 
{
    // other propeties
 
    // Passing data annotations
    [MinLength(7, ErrorMessage = "Password Min Length is 7")]
    public string Password { get; set; }

}

为了使数据注释验证正常工作，不要忘记您需要在 EditForm 中包含 DataAnnotationsValidator 组件

<EditForm Model="@ModelValue">
    <DataAnnotationsValidator />

    @* rest of components *@
</EditForm>

【讨论】：