如何在单击按钮时使用HTML表单验证? [英] How to use HTML form validation on button click?

问题描述

我正在使用SyncFusion和Blazor创建一个应用程序.在此应用程序中，我有一个登录页面，如下所示:

I'm creating a application using SyncFusion and Blazor. In this application I have a login page which looks like this:

使用此代码:

<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浏览器验证弹出窗口.在我的情况下，这些工作有点奇怪，因此我正确地创建了一个视频插图:

In this form are html browser validation popups applied(automatically). These work kind of weird in my situation therefore i created a video illustration it properly:

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

如您所见，电子邮件字段工作正常，每次按下按钮时都会进行html表单验证.在密码"字段中不是这种情况，至少需要7个字符，而当我按提交"按钮时，仅填写3个字符，我没有收到任何警告.

As u can see the email field works fine, html form validation occurs every time when button is pressed. In the Password field this is not the case, theres required a minimum of 7 characters and when i press submit button with only 3 characters filled in im not getting any warnings.

有人知道如何解决此问题吗?

Does someone know how to fix this?

推荐答案

如果要使用html5表单验证，则minlength属性将不起作用.如果要进行验证，则应使用pattern属性，并像pattern=".{7,}"一样传递它. 此答案中对此进行了解释.

If you want to use the html5 form validation, the minlengthattribute won't work. If you want to do that validation you should use pattern attribute and pass it like pattern=".{7,}". This is explained in this answer.

如果要使用blazor验证(这是更好的建议)，则需要在User模型中使用数据注释.

If you want to use the blazor validation (which is much better and recommended), you need to use data annotations in your User model.

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

For your particular case, you can use the MinLength attribute.

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

}

要使数据注释验证有效，请不要忘记需要在EditForm

And for the data annotations validation to work, don't forget that you need to have the DataAnnotationsValidator component inside the EditForm

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

    @* rest of components *@
</EditForm>

这篇关于如何在单击按钮时使用HTML表单验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！