如何在剃须刀页面中添加自定义表单客户端验证并删除 Chrome 内置验证

Question

我正在使用 NET Core 3 剃须刀页面开发 Web 应用程序，我的 Login.cshtml 页面如下所示：

<div class="columns is-centered">
    <div class="column is-6">
        <div class="card auth-card">
            <div class="card-content">
                <div class="login-form is-grouped-centered">
                    <form method="post">
                        <p class="login-form__title subtitle">Sign In or Register</p>
                        <div class="login-form__field field">
                            <div class="login-form__email-group form-row">
                                <label class="login-form__email-label" asp-for="Input.Email">My Email</label>
                                <input class="login-form__input control input" asp-for="Input.Email" id="email-input" placeholder="john.doe@example.com" required maxlength="255" title=" " />
                                <span asp-validation-for="Input.Email" class="has-text-danger"></span>
                            </div>
                        </div>
                        <p class="login-form__title subtitle">Are you an Esencia customer?</p>
                        <div class="login-form__radio-group">
                            <input type="radio" class="login-form__radio-group-radio radio" @@click="disablePassword(true)" name="new_account" value="1" id="signin_new_customer">
                            <label for="signin_new_customer">No, sign me up.</label>
                        </div>
                        <div class="login-form__field login-form__radio-group">
                            <input type="radio" class="login-form__radio-group-radio radio" @@click="disablePassword(false)" name="new_account" value="0" id="signin_existing_customer" checked>
                            <label for="signin_existing_customer">Yes, my password is</label>
                            <div class="login-form__radio-group">
                                <input class="login-form__input control input" asp-for="Input.Password" id="auth-password" required />
                                <span asp-validation-for="Input.Password" class="has-text-danger"></span>
                            </div>
                        </div>
                        <div class="field has-text-right">
                            <a href="#">Forgotten your password?</a>
                        </div>
                        <div class="login-form__submit">
                            <input v-if="!isNewAccount" class="login-form__submit-button button is-success" type="submit" name="name" value="Sign In" />
                            <a v-if="isNewAccount" class="login-form__submit-button button is-success" asp-page="/Accounts/Register">Sign Up</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试添加验证的模型是：

public class LoginViewModel
{
    [Required(ErrorMessage = "The Email field is required")]    
    [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", ErrorMessage = "Please enter a valid email")]
    public string Email { get; set; }

    [Required(ErrorMessage = "The password field is required")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

由于某种原因，此自定义验证不起作用，错误未显示在输入字段下设计的 span 标签中，我无法摆脱此消息（见下图），我认为它是 chrome 内置的错误消息验证。看起来验证助手标签根本不起作用。任何人都可以帮我解决这个问题吗？我肯定错过了什么。提前非常感谢！

更新：当我在 HTML 中添加“必需”属性时会显示 chrome 自定义验证，如果我将其删除，它就会消失，问题是模型验证仍然无法正常工作，它允许用户单击“签名” In”按钮带有空字段，通过允许发布完全错误的表单导致错误页面...

Answer 1

客户端验证不是一种安全措施。任何有权访问浏览器中的开发人员工具的人都可以轻松绕过它。因此，它是可选的。您必须在页面中包含部分验证脚本：

@section scripts{
   <partial name="_ValidationScriptsPartial" />
}

https://www.learnrazorpages.com/razor-pages/validation#client-side-validation