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

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”和“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 集成

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