Question

我试图在我的网络应用程序中创建一个注册页面。但是，我的表单上的验证无效。例如，我的密码最小长度为4个租船人，但如果我输入空密码，它仍会发出POST请求。如何告知表单模型无效以及是否应更改密码，电子邮件等？

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>

Soultion 由于Register寄存器页面位于Home控制器下，并且Register逻辑位于Account控制器中，因此我必须定义视图以加载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库/文件加载到您的页面。

jquery.validate.js
jquery.validate.unobtrusive.js

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

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

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

表单模型在POST之前未验证

1 个答案: