如何在密码字段中添加引导表单验证错误消息？

如何解决如何在密码字段中添加引导表单验证错误消息？

我正在SyncFusion blazor中创建一个具有登录页面的应用程序，在此登录页面中，我使用以下形式（+代码）：

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

        <SfTextBox @ref="password" Placeholder="Password" Created="@onCreatePassword" CssClass="custom-login" Type="InputType.Password" @bind-Value="@ModelValue.Password"></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{

     private User ModelValue = new User();

     private void validateForm() {
         StateHasChanged();
     }

  class User
  {
    public int Id { get; set; }

    public string Email { get; set; }

    public string Password { get; set; }

  }
}

当电子邮件字段中没有“ @”和“ @”后面的字符时，此代码会以某种方式向用户生成警告消息：

错误已翻译：“在电子邮件地址字段中使用“ @”。在“ gtgtg”中缺少“ @”。

这些警告消息看起来比使用C＃中的数据注释仅是我自己的原始文本更好。我要达到的目的是，这些检查也将在我的“密码”字段中进行（检查字符数是否最少为7），并在单击“提交”按钮时检查电子邮件和密码字段是否为空。

我该如何实现？

注意：我正在使用Bootstrap 4。

谢谢！

解决方法

它们是html浏览器验证弹出窗口

要使您的消息显示为弹出窗口，您需要在输入框中添加HTML属性“ required”和“ minlength”：

<input type="password" id="password" name="password" required minlength="7">

当您使用Synfusion按钮时，我假设以上操作应如下：

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

必填：

最小长度：

推荐

：

我建议您看看FluentValidation以及它如何与blazor集成

您始终可以将用户界面从文本错误更改为引导弹出窗口。