c# - 表单模型在 POST 之前未验证

Question

我正在尝试在我的网络应用程序中创建一个注册页面。但是，我的表单上的验证不起作用。例如，我的密码最小长度为 4 个承租人，但如果我输入空白密码，它仍会发出 POST 请求。我如何告诉表格模型无效，他们应该更改密码、电子邮件等？

AccountController.cs

[HttpPost]
public ActionResult Register(RegisterModel model){
    if (ModelState.IsValid){
        // Insert into database
    }
    // There was an error
    return View(model);
}

注册模型.cs

public class RegisterModel
{

    [Required]
    [Display(Name = "UserName")]
    public string UserName { get; set; }

    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 4)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

注册.cshtml

@model RegisterModel
    <form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
        <h4>Create a new account.</h4>
        <hr />
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="UserName" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="UserName" class="form-control" />
                <span asp-validation-for="UserName" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Email" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Password" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Password" class="form-control" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="ConfirmPassword" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="ConfirmPassword" class="form-control" />
                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-default">Register</button>
            </div>
        </div>
    </form>

灵魂 由于注册页面位于主 Controller 下，而注册逻辑位于帐户 Controller 中，因此我必须定义 View 以加载 Register.cshtml 页面。

[HttpPost]
public ActionResult Register(RegisterModel model){
    if (ModelState.IsValid){
        // Insert into database
    }
    // There was an error
    return View("~/Views/Home/Register.cshtml",model)
}

Answer 1

当您单击提交按钮时，它会将表单发送到服务器，您的操作方法中包含检查表单是否有效的代码 (ModelState.IsValid)。这是服务器端验证。为此，必须将表单发布到服务器。

如果您希望在客户端进行验证(如果验证失败则不提交表单)，您需要确保已将相关的 javascript 库/文件加载到您的页面。

1. jquery.validate.js
2. jquery.validate.unobtrusive.js

您可以将它们包含在您的布局文件或您的特定 View 中。如果是特定 View ，请确保将它们包含在脚本部分。

@section Scripts
{
 <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
 <script src="~/lib/jquery-validation- unobtrusive/jquery.validate.unobtrusive.js"></script>
}

更新文件的路径以匹配您在项目中拥有这些文件的位置。您也可以将该位置用于公共(public) cdn。