Formularmodell nicht vor POST validieren

Question

Ich versuche eine Registrierungsseite in meiner Webanwendung zu erstellen. Die Überprüfung meines Formulars funktioniert jedoch nicht. Zum Beispiel habe ich mein Passwort Mindestlänge 4 Charterern, aber wenn ich ein leeres Passwort eingeben, macht es immer noch die POST-Anfrage. Wie kann ich dem Formular mitteilen, dass das Modell nicht gültig ist und dass es sein Passwort, seine E-Mail-Adresse usw. ändern sollte?

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 seit der Re Gister-Seite war unter Home-Controller, und die Register-Logik war in der Account-Controller Ich musste die Ansicht definieren, um die Register.cshtml Seite zu laden.

[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

Wenn Sie auf den Absenden-Button klicken, wird das Formular an den Server, wo Ihre Aktion-Methode Code, ob das Formular gültig zu prüfen hat, ist (ModelState.IsValid). Dies ist eine serverseitige Validierung. Das Formular muss auf dem Server veröffentlicht werden, damit dies geschieht.

Wenn die Validierung auf der Clientseite erfolgen soll (und das Formular nicht übergeben wird, wenn die Validierung fehlschlägt), müssen Sie sicherstellen, dass die relevanten JavaScript-Bibliotheken/-Dateien auf Ihrer Seite geladen sind.

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

Sie können die in Ihrem Layout-Datei oder spezifische Ansicht enthalten. Wenn es sich um die spezifische Ansicht handelt, stellen Sie sicher, dass Sie diese in den Abschnitt "Scripts" einfügen.

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

Aktualisieren Sie den Pfad der Dateien mit dem, wo Sie diese Dateien in Ihrem Projekt haben. Sie können den Standort auch für eine öffentliche CDN verwenden.