Kaip atlikti JavaScript formų validaciją: Pradžiamokslis su pavyzdžiais

Jei kada nors kūrėte interneto svetainę arba aplikaciją, tikriausiai žinote, kad formos validacija yra būtina norint užtikrinti, kad vartotojo įvesti duomenys būtų teisingi ir tinkami. Tai padeda išvengti klaidų ir apsaugo nuo nepageidaujamo ar netinkamo duomenų įvedimo. Šiame straipsnyje aptarsime, kaip atlikti formų validaciją naudojant JavaScript, pateiksime pavyzdžių ir paaiškinsime, kodėl ši praktika yra būtina kiekvienam kūrėjui.

Kas yra JavaScript formų validacija?

JavaScript formų validacija yra procesas, kurio metu tikrinama, ar vartotojo pateikti duomenys atitinka nustatytus reikalavimus. Tai gali apimti įvairius patikrinimus, tokius kaip ar laukai užpildyti, ar įvesti duomenys turi tinkamą formatą (pavyzdžiui, elektroninio pašto adresas ar telefono numeris). Formų validacija dažnai atliekama prieš siunčiant duomenis į serverį, kad būtų išvengta klaidų ir nereikalingo serverio apkrovimo.

Kodėl svarbu atlikti formų validaciją?

Validacija atlieka kelias svarbias funkcijas, kurios padeda ne tik pagerinti vartotojo patirtį, bet ir apsaugo jūsų svetainę nuo potencialių klaidų bei užtikrina duomenų tikslumą. Pagrindinės priežastys atlikti validaciją:

• Užtikrina duomenų teisingumą: Patikrinama, ar įvesti duomenys atitinka reikalavimus ir formos laukai užpildyti.
• Apsaugo nuo klaidų: Pagal klaidų patikrinimą vartotojas gali greitai ištaisyti klaidas, nežinodamas, kad jų padarė.
• Patobulina vartotojo patirtį: Duomenų tikrinimas realiuoju laiku užtikrina, kad vartotojas gali greitai gauti grįžtamąjį ryšį apie klaidas, išvengiant nereikalingo laukimo po formos pateikimo.

JavaScript formų validacijos pavyzdžiai

Dabar pažvelkime į keletą paprastų JavaScript validacijos pavyzdžių, kurie padės jums pradėti. Mes pateiksime pavyzdžius, kaip patikrinti formų laukus ir užtikrinti, kad vartotojo įvesti duomenys būtų teisingi.

1. Patikrinimas, ar visi laukai užpildyti

Pradėkime nuo paprasčiausio patikrinimo – ar visi reikalingi laukai užpildyti. Tai ypač naudinga užtikrinant, kad vartotojas nepamirštų pateikti svarbių duomenų, tokių kaip vardas, el. paštas ar telefonas.

// Pavyzdys: Patikriname, ar visi laukai užpildyti
function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  if (name == "" || email == "") {
    alert("Visi laukai turi būti užpildyti!");
    return false; // Neleidžiama pateikti formos
  }
  return true; // Formą galima pateikti
}

Ši funkcija patikrina, ar „name“ ir „email“ laukai yra užpildyti. Jei ne, pasirodo klaidos pranešimas, ir forma nebus pateikta.

2. Patikrinimas, ar įvesta elektroninio pašto adresas yra tinkamas

El. pašto validacija yra dar vienas svarbus žingsnis. JavaScript gali patikrinti, ar įvestas tekstas atitinka el. pašto formatą (pavyzdžiui, „user@example.com“).

// Pavyzdys: Patikriname, ar el. pašto adresas yra tinkamas
function validateEmail() {
  var email = document.getElementById("email").value;
  var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  
  if (!re.test(email)) {
    alert("Prašome įvesti teisingą el. pašto adresą!");
    return false; // Neleidžiama pateikti formos
  }
  return true; // Formą galima pateikti
}

Šis pavyzdys naudoja reguliarius išraiškas (regular expressions), kad patikrintų, ar el. pašto adresas turi tinkamą formatą. Jei jis neatitinka reikalavimų, vartotojui bus parodytas klaidos pranešimas.

3. Skaičių patikrinimas

Kai kuriems formų laukams reikia tik skaičių, pvz., telefono numeriams. JavaScript gali patikrinti, ar įvestas tekstas yra skaičius.

// Pavyzdys: Patikriname, ar įvestas telefono numeris yra skaičius
function validatePhone() {
  var phone = document.getElementById("phone").value;
  
  if (isNaN(phone) || phone == "") {
    alert("Prašome įvesti teisingą telefono numerį!");
    return false; // Neleidžiama pateikti formos
  }
  return true; // Formą galima pateikti
}

Šis pavyzdys tikrina, ar vartotojas įvedė tik skaičius. Jei įvesta reikšmė nėra skaičius arba laukas paliekamas tuščias, pateikiamas klaidos pranešimas.

Kaip atlikti formų validaciją tikrinant daugiau laukų

Galiausiai, dažniausiai formose reikalingas įvairių laukų validavimas. Pavyzdžiui, galite patikrinti, ar visi laukai užpildyti, ar įvesti duomenys yra teisingi, ir ar duomenys atitinka numatytus reikalavimus. Galite sujungti įvairius validacijos patikrinimus į vieną funkciją.

// Pavyzdys: Kombinuotas formos validacijos kodas
function validateCompleteForm() {
  if (validateForm() && validateEmail() && validatePhone()) {
    alert("Formą sėkmingai užpildėte!");
    return true;
  }
  return false;
}

Ši funkcija sujungia visus anksčiau paminėtus patikrinimus į vieną validacijos funkciją, kad būtų galima patikrinti kelis laukus vienu metu prieš pateikiant formą.

JavaScript formų validacijos privalumai ir trūkumai

Kaip ir bet kokia technologija, JavaScript formų validacija turi tiek privalumų, tiek trūkumų. Pažvelkime į juos:

Privalumai:

• Greita ir efektyvi: JavaScript leidžia atlikti patikrinimus tiesiai naršyklėje, todėl vartotojui nereikia laukti, kol serveris apdoros duomenis.
• Patobulinta vartotojo patirtis: Realus laiko klaidų pranešimai padeda vartotojams greitai taisyti klaidas.
• Sumažina serverio apkrovą: Jei duomenys jau patikrinti naršyklėje, serveris negaus klaidingų duomenų ir gali koncentruotis tik į pagrindinį apdorojimą.

Trūkumai:

• Ne visi vartotojai įjungia JavaScript: Jei vartotojas išjungė JavaScript naršyklėje, formos validacija nebus atlikta, ir tai gali sukelti klaidų.
• Priklauso nuo naršyklės: Skirtingos naršyklės gali interpretuoti JavaScript kodą šiek tiek kitaip, todėl reikia užtikrinti, kad kodas būtų suderinamas su visomis naršyklėmis.

Apibendrinimas

JavaScript formų validacija yra svarbus įrankis, užtikrinantis, kad jūsų svetainės vartotojai pateiks teisingus ir tinkamus duomenis. Tai ne tik apsaugo nuo klaidų, bet ir pagerina vartotojo patirtį. Naudodami šiuos paprastus JavaScript pavyzdžius, galite greitai pradėti kurti saugias ir efektyvias formas savo svetainėse. Nepamirškite, kad validacija turi būti tiek puslapyje, tiek ir serverio pusėje, kad būtų užtikrinta pilna duomenų apsauga!