表单模型在发布前不进行验证

Question

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

AccountController.cs

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

RegisterModel.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; }
}

Register.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>

由于寄存器页位于主控制器之下，并且寄存器逻辑在帐户控制器中，所以必须定义加载页面的视图。

[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

单击submit按钮时，它会将表单发布到操作方法有代码的服务器，以检查表单是否有效( ModelState.IsValid)。这是服务器端验证。为了实现这一点，必须将表单发布到服务器上。

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

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

您可以将这些内容包含在布局文件或特定视图中。如果是特定的视图，请确保将这些视图包含在Scrips部分中。

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

更新文件的路径，以便与项目中有这些文件的位置匹配。您还可以将该位置用于公共cdn。