如何将 bootstrap 表单验证错误消息添加到密码字段？

Question

我正在 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.

提前致谢！

Answer 1

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

要使您的消息显示为弹出窗口，您需要向输入框添加 HTML 属性“required" and "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 and how it integrates with blazor

您随时可以将 UI 从文本错误更改为 bootstrap 弹出窗口。

如何将 bootstrap 表单验证错误消息添加到密码字段？

How to add bootstrap form validation error message to password field?

forms

validation

twitter-bootstrap

twitter-bootstrap-3

blazor