Kaip naudoti „JavaScript“, kad patvirtintumėte C# formą be duomenų anotacijų

Kliento pusės formos patvirtinimas C# naudojant „JavaScript“.

Formos patvirtinimas yra labai svarbus žingsnis kuriant žiniatinklio programas, siekiant užtikrinti, kad pateikiami duomenys būtų tikslūs ir išsamūs. Kūrėjai dažnai renkasi serverio arba kliento patvirtinimo metodus. Vienas iš dažniausiai naudojamų C# metodų yra DataAnnotations naudojimas serverio patvirtinimui. Tačiau tai ne visada gali atitikti kiekvieną scenarijų.

Tam tikrais atvejais kliento pusės patvirtinimas naudojant „JavaScript“ gali pasiūlyti dinamiškesnę vartotojo patirtį, leidžiančią aptikti klaidas prieš jas siunčiant į serverį. Šis metodas apsaugo nuo nereikalingų serverio užklausų, pagerindamas našumą ir vartotojo sąveiką.

Šiame straipsnyje mes išnagrinėsime, kaip patvirtinti formą C# naudojant JavaScript, nepasikliaujant standartiniais DataAnnotations atributais. Tiksliau, mes sutelksime dėmesį į kelių teksto sričių patvirtinimą ir užtikrinsime, kad forma nebūtų per anksti įkelta ją pateikus.

Jei formoje jau yra duomenų ir išvalysite vieną iš laukų, gali kilti problemų, kai forma įkeliama iš naujo, nerodant laukiamų įspėjimų. Išsiaiškinsime, kodėl taip nutinka ir kaip tai išspręsti naudojant efektyvią „JavaScript“ logiką.

Kliento formos patvirtinimo su JavaScript ir C# supratimas

Šiame straipsnyje mes sutelkiame dėmesį į paprasto formos patvirtinimo mechanizmo kūrimą naudojant „JavaScript“, skirtą C# ASP.NET Core projektui. Formoje yra kelios teksto sritys, kuriose vartotojas turi įvesti informaciją, o mes naudojame JavaScript, kad įsitikintume, jog visi laukai yra tinkamai užpildyti prieš pateikiant formą. Aplenkdami C# DataAnnotations, įdiegiame tinkintą sąsajos patvirtinimą, kuris įvyksta akimirksniu, neleidžiant be reikalo įkelti puslapio iš naujo. Šis metodas pagerina našumą ir vartotojo patirtį sumažindamas nereikalingus serverio skambučius.

Norėdami tai padaryti, patvirtintiForm() „JavaScript“ funkcija tikrina visas formos teksto sritis. Komanda querySelectorAll() naudojamas surinkti visus teksto srities elementus, kurie vėliau kartojami naudojant kilpą. Jei kuri nors teksto sritis yra tuščia (t. y. reikšmė yra tik tarpai arba visiškai tuščia), visi užpildyti vėliava nustatyta kaip false. Kai taip nutinka, funkcija suaktyvina įspėjimą, informuojantį vartotoją, kad visi laukai turi būti užpildyti, o formos pateikimas sustabdomas naudojant event.preventDefault(). Tai veiksmingai apsaugo nuo puslapio įkėlimo iš naujo, todėl vartotojas gali ištaisyti klaidą.

Aprašyta problema kyla, kai vartotojas išvalo duomenis iš tekstinės srities ir pateikia formą. Tais atvejais, kai forma yra iš anksto užpildyta ir laukas išvalytas, jei mūsų patvirtinimas neveikia tinkamai, puslapis įkeliamas iš naujo, nerodant įspėjimo. Ši problema iškyla, kai event.preventDefault() nėra tinkamai iškviestas, greičiausiai dėl to, kad patvirtinimo logika neaptinka išvalyto lauko kaip negaliojančio. Užtikrinus, kad „JavaScript“ patvirtinimas dinamiškai tikrintų, ar nėra tuščių laukų, šios problemos galima išvengti. Be to, patvirtinimo logika turi spręsti galimas asinchronines problemas, dėl kurių forma gali būti įkelta iš naujo prieš baigiant patikrą.

Galiausiai, serverio pusės patvirtinimas, įgyvendintas naudojant C# ModelState.AddModelError(), veikia kaip atsarginė priemonė, kai kliento pusės patvirtinimas nepavyksta arba apeinamas. Nors „JavaScript“ atlieka daugumą tikrinimo užduočių, serverio patvirtinimas užtikrina, kad į serverį nepateiktų neišsamių ar neteisingų duomenų. Šis dviejų sluoksnių metodas, naudojant ir priekinį, ir galinį patvirtinimą, užtikrina optimalų formos patvirtinimo saugumą ir našumą. Naudodami šią sąranką galime būti tikri, kad apdorojami tik tinkami duomenys, o forma yra patogi ir greita.

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allFilled = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      allFilled = false;
      break;
    }
  }
  if (!allFilled) {
    alert("All fields are required.");
    event.preventDefault();
    return false;
  }
  return true;
}

[HttpPost]
public IActionResult SaveForm(ModelExample model)
{
  if (string.IsNullOrEmpty(model.Name) ||
      string.IsNullOrEmpty(model.Name2) ||
      string.IsNullOrEmpty(model.Name3))
  {
    ModelState.AddModelError("", "All fields must be filled.");
    return View(model);
  }
  // Continue processing
  return RedirectToAction("Success");
}

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allValid = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      textAreas[i].classList.add('is-invalid');
      allValid = false;
    } else {
      textAreas[i].classList.remove('is-invalid');
    }
  }
  if (!allValid) {
    event.preventDefault();
    alert("Please fill in all required fields.");
    return false;
  }
  return true;
}

[Fact]
public void TestFormValidation() {
  var controller = new MyController();
  var model = new ModelExample { Name = "", Name2 = "Valid", Name3 = "" };
  var result = controller.SaveForm(model);
  Assert.True(controller.ModelState.ContainsKey(""));
  Assert.Equal("All fields must be filled.",
                controller.ModelState[""].Errors[0].ErrorMessage);
}

Asinchroninių „JavaScript“ formų patvirtinimo metodų tyrinėjimas

Vienas aspektas, kurio neaptarėme, yra asinchroninio patvirtinimo vaidmuo tvarkant formas. Asinchroninis patvirtinimas leidžia kūrėjams patikrinti formos laukus neužblokuojant vartotojo patirties. Pavyzdžiui, galite patikrinti vartotojo vardo unikalumą arba patikrinti, ar el. laiškas egzistuoja realiuoju laiku, siųsdami užklausas serveriui fone, neįkeldami puslapio iš naujo. Šis metodas gali būti įgyvendintas naudojant JavaScript gauti API arba AJAX. Abu metodai padeda pagerinti vartotojo patirtį, teikdami tiesioginį atsiliepimą.

Formos patvirtinimo kontekste asinchroninės užklausos leidžia puslapiui išlikti interaktyviam laukiant serverio atsakymų. Tai gali būti naudinga dirbant su dideliais duomenų rinkiniais arba keliomis tikrinimo taisyklėmis, pvz., tikrinant, ar viename lauke įvestas tekstas atitinka konkretų formatą, ir toliau tikrinant kitus laukus. Derindami priekinį ir asinchroninį patvirtinimą, kūrėjai gali padidinti formos patvirtinimo patikimumą ir pagerinti puslapio įkėlimo laiką. Svarbiausia yra suaktyvinti asinchroninę užklausą tik tada, kai reikia, kad būtų išvengta serverio perkrovos.

Naudodami asinchroninį patvirtinimą C# aplinkoje, taip pat turėtumėte užtikrinti, kad serverio patvirtinimas veiktų kaip atsarginė priemonė. Kadangi kliento pusės patvirtinimą galima apeiti išjungus JavaScript, visada patikrinkite įvestis serverio pusėje. Taip užtikrinama, kad nepraslys neteisingi duomenys. Asinchroninio patvirtinimo naudojimas kartu su tradiciniu „JavaScript“ gali padėti pasiekti saugią ir patogią patirtį, ypač derinant su tinkamu klaidų apdorojimu ir našumo optimizavimo metodais.