„jQuery“ formos patvirtinimo pamoka: paprastas pavyzdys su „jQuery“ patvirtinimo papildiniu

Šioje pamokoje parodyta, kaip nustatyti paprastą formos patvirtinimo pavyzdį naudojant registracijos formą.

HTML formai patvirtinti naudosime jQuery patvirtinimo papildinį. Pagrindinė šio papildinio funkcija yra nurodyti HTML elementų patvirtinimo logiką ir klaidų pranešimus JavaScript kode.

Štai tiesioginė HTML formos patvirtinimo naudojant „jQuery“, kurią ketiname sukurti, demonstracija:

Peržiūrėkite „Pen jQuery“ formos patvirtinimą „SitePoint“ (@SitePoint) „CodePen“.

Pagrindiniai patiekalai:

• Pirmiausia į savo HTML kodo fragmentą įtraukite jQuery biblioteką, kad nustatytumėte pagrindinį formos įvesties patvirtinimą su jQuery papildiniu. Galite atsisiųsti jį iš oficialios svetainės, naudoti paketų tvarkyklę, pvz., Bower arba npm, arba naudoti CDN.
• Įtraukę „jQuery“, įtraukite „jQuery“ duomenų patvirtinimo papildinį. Šis papildinys leidžia nurodyti HTML elementų patvirtinimo logiką ir klaidų pranešimus JavaScript kode. Pavyzdžiui, galite sukurti pagrindinę formą su vartotojo informacijos įvesties laukais ir naudoti papildinį šiai informacijai patvirtinti.
• Norėdami sukurti formos stilių, sukurkite naują CSS failą ir įtraukite jį į HTML kodo antraštės skyrių. Tada inicijuokite „jQuery“ patvirtinimą pateikiant formą naujame „JavaScript“ (JS) faile, nurodydami kiekvieno įvesties lauko patvirtinimo taisykles ir klaidų pranešimus.
• Atminkite, kad kliento patvirtinimas nepakeičia serverio patvirtinimo, nes piktybinis vartotojas vis tiek gali manipuliuoti arba apeiti patvirtinimo taisykles.
• Naršykite pažangias technologijas, tokias kaip pasirinktiniai patvirtinimo metodai, tikrinimas realiuoju laiku ir nuotolinis serverio patikrinimų patvirtinimas.
• Laikykitės geriausios saugos praktikos, derindami kliento ir serverio patvirtinimą, kad apsaugotumėte nuo kenkėjiškos įvesties.

Formos patvirtinimo metodų supratimas

Prieš pasinerdami į diegimą, palyginkime rankinio ir jQuery duomenų patvirtinimo papildinio metodus, kad suprastume, kodėl patvirtinimo papildinys išsiskiria:

Apskritai, „jQuery“ papildinio metodas turi keletą privalumų:

• Integruoti patvirtinimo metodai.
• Automatinis klaidų valdymas.
• Nuoseklus elgesys įvairiose formose.
• Lengvas pritaikymas.
• Geresnis kodo organizavimas.
• Integruotos pritaikymo neįgaliesiems funkcijos.

Kadangi dabar turite pagrindinį supratimą apie tai, kas yra JQuery, pereikime prie paprasto jQuery formos patvirtinimo pavyzdžio kūrimo žingsnių. Toliau pateikti veiksmai padės aiškiai suprasti, kaip patvirtinti formą prieš pateikiant.

1 veiksmas: įtraukite jQuery

Pirmiausia turime įtraukti jQuery biblioteką. Rašymo metu naudojame naujausią jQuery 3.7.1 versiją.

Galite naudoti bet kurią iš šių atsisiuntimo parinkčių:

• Atsisiųskite jį iš jquery.com.
• Atsisiųskite jį naudodami Bower: $ bower install jquery.
• Atsisiųskite jį naudodami npm arba verpalą: $ npm install jquery arba verpalų pridėti jquery.
• Naudokite naujausią suderinamą CDN versiją.

Sukurkite naują HTML failą pavadinimu index.html ir įtraukite jQuery prieš baigiamąją žymą:

<script src="vendor/jquery/dist/jquery.min.js"></script>

Jei norite naudoti Bower arba npm, bet nesate su jais susipažinę, jus gali sudominti šie du straipsniai:

2 veiksmas: įtraukite „jQuery“ patvirtinimo papildinį

Patvirtinimo papildinys išplečia „jQuery“ galimybes naudodamas integruotus patvirtinimo metodus.

Pasirinkite vieną iš:

• Atsisiųskite jį iš papildinio „GitHub“ repo.
• Atsisiųskite jį naudodami Bower: $ bower install jquery-validation.
• Atsisiųskite jį naudodami npm: npm i jquery-validation.
• NuGet: diegimo paketas jQuery.Validation.
• Naudokite naujausią suderinamą CDN versiją.

Įtraukite papildinį po jQuery:

<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

3 veiksmas: sukurkite HTML failą

Registracijos formoje naudosime šią vartotojo informaciją:

1. Vardas
2. Pavardė
3. El. paštas
4. Slaptažodis

Taigi, sukurkime pagrindinę formą su šiais įvesties laukais:

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="●●●●●"/>

    <button type="submit">Register</button>

  </form>
</div>

Integruodami tai į tikrąją programą, nepamirškite užpildyti veiksmo atributo aukščiau esančiame kode, kad įsitikintumėte, jog forma pateikta teisinga paskirties vieta.

4 veiksmas: sukurkite formos stilius

Sukurkite naują failą css/styles.css ir įtraukite jį į HTML kodo fragmento skiltį:

<link rel="stylesheet" href="css/style.css"/>

Nukopijuokite šiuos stilius į naujai sukurtą failą:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}


form .error {
  color: #ff0000;
}

Po šio veiksmo forma atrodys taip:

Pastaba: .error stiliai parodys visus klaidų pranešimus.

5 veiksmas: sukurkite patvirtinimo logiką

Galiausiai turime inicijuoti patvirtinimo papildinį. Sukurkite naują failą js/form-validation.js ir nurodykite jį po jQuery duomenų tikrinimo papildinio žyma

Draugai: - Marketingo agentūra - Teisinės konsultacijos - Skaidrių skenavimas - Klaipedos miesto naujienos - Miesto naujienos - Saulius Narbutas - Įvaizdžio kūrimas - Veidoskaita - Teniso treniruotės - Pranešimai spaudai - Kauno naujienos - Regionų naujienos - Palangos naujienos

Welcome Back!

Sign in to your account

Vartotojo vardas arba el.paštas

Slaptažodis

Prisiminti duomenis

Pamiršote slaptažodį?