时间戳

首页 > 解决方案 > 如何在按钮单击时使用 HTML 表单验证？

c# - 如何在按钮单击时使用 HTML 表单验证？

问题描述

我正在使用 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#htmlformsvalidationblazor

解决方案

如果要使用 html5 表单验证，该minlength属性将不起作用。如果您想进行该验证，您应该使用pattern属性并将其传递给pattern=".{7,}". 这在此答案中进行了解释。

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

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

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

}

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

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

    @* rest of components *@
</EditForm>

推荐阅读