Javascript Form Validation: Kiel Efike Validigi Viajn Formularojn?

Kiam vi kreas interretan formularon, unu el la plej gravaj taskoj estas certigi, ke la informoj senditaj de uzantoj estas ĝustaj. Formulaj validigoj estas esencaj por eviti erarojn, plibonigi uzantaran sperton kaj protekti viajn servojn kontraŭ malbonaj datumoj. En ĉi tiu artikolo, ni esploros kiel fari formularajn validigojn uzante JavaScript. Vi lernos kiel validigi bazajn informojn kiel e-mailojn, telefono-nombrojn, kaj aliajn datumojn.

Kio Estas JavaScript Form Validation?

Formularaj validigoj estas procezo por kontroli, ke la datumoj en via formularo estas ĝustaj kaj plenaj antaŭ ke ili estu senditaj al la servero. JavaScript estas la ideala ilo por ĉi tiu tasko, ĉar ĝi povas rapide kontroli la valorojn de la kampoj sen ke la paĝo estu refreŝigita, donante al la uzanto reagon en reala tempo. Ĉi tio ne nur plibonigas uzantaran sperton, sed ankaŭ povas forigi la bezonon de servilaj validigoj por iuj eraraj datumoj.

Kial Utili JavaScript por Validigo?

La ĉefa kialo por uzi JavaScript por formularaj validigoj estas ke ĝi estas facila, rapida kaj efika. Anstataŭ atendi, ke la formularo estu sendita al la servilo kaj ke eraro estu montrita nur post la sendado, JavaScript ebligas kontroli la informojn en la kliento-flanko. Tiel vi povas provizi instantan reagon kaj korektojn por la uzanto, sen ke li aŭ ŝi estu devigita refreŝigi aŭ sendi la formularon.

Ekzemploj de JavaScript Form Validation

Ni komencu per simplaj ekzemploj, kiuj montras kiel fari la plej oftajn validigojn uzante JavaScript. Unue, ni validigos se ĉiuj kampoj estas plenigitaj, poste ni kontrolos se la formato de la uzantaj enmetoj estas ĝusta, ekzemple, por e-mail-adreso.

1. Ĉu Ĉiuj Kampoj Estas Plenigitaj?

Unu el la plej bazaj validigoj estas kontroli, ke ĉiuj kampoj en la formularo estas plenigitaj. Jen ekzemplo de kodo kiu faras tion:

function validigiFormularon() {
  var nomo = document.getElementById("nomo").value;
  var retpoŝto = document.getElementById("retposxto").value;
  if (nomo == "" || retpoŝto == "") {
    alert("Bonvolu plenigi ĉiujn kampojn.");
    return false;
  }
  return true;
}

En ĉi tiu ekzemplo, ni uzas JavaScript por akiri la valorojn de la kampoj "nomo" kaj "retpoŝto" kaj kontrolas ĉu ili estas malplenaj. Se unu el ili estas malplena, la funkcio montras averton al la uzanto kaj malhelpas la formularon esti sendita.

2. Validigo de Retpoŝto

Post kiam vi certigis, ke ĉiuj kampoj estas plenigitaj, vi probable volos kontroli la formaton de tiuj informoj. Ekzemple, ni volas certigi, ke la uzanto enmetas validan retpoŝtadreson. Ĉi tio povas esti farita per simpla regula esprimo:

function validigiRetposxtanFormaton() {
  var retpoŝto = document.getElementById("retposxto").value;
  var regulo = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!regulo.test(retpoŝto)) {
    alert("Bonvolu enigi validan retpoŝtadreson.");
    return false;
  }
  return true;
}

Ĉi tiu funkcio uzas regulan esprimon por kontroli, ĉu la e-mail-adreso kongruas kun la ĝenerale akceptita formato. Se la formato estas malĝusta, ĝi montras erarmesaĝon kaj malhelpas la formularon esti sendita.

3. Validigo de Telefonnumero

Alia komuna validigo estas por telefonnumeroj. Vi eble volas certigi, ke la telefonnumero estas ĝusta, ekzemple, en tiu ĉi formato: (xxx) xxx-xxxx. Jen ekzemplo de kiel fari tion:

function validigiTelefonnumeron() {
  var telefono = document.getElementById("telefono").value;
  var regulo = /^\(\d{3}\) \d{3}-\d{4}$/;
  if (!regulo.test(telefono)) {
    alert("Bonvolu enigi validan telefonnumeron en la formato (xxx) xxx-xxxx.");
    return false;
  }
  return true;
}

Ĉi tiu kodo uzas regulan esprimon por certigi, ke la telefonnumero estas en la ĝusta formato. Se ĝi ne kongruas, la formularo ne estos sendita kaj eraro montriĝas al la uzanto.

Kompleta Formulario kun Validigo

Nun ni kombinos ĉiujn validigojn en unu formularo. Jen kiel via formularo povus aspekti kun JavaScript-validigoj por la kampoj "nomo", "retpoŝto" kaj "telefono".

  Nomo:
  


  
  Retpoŝto:
  



  Telefono:
  



  

En ĉi tiu ekzemplo, la funkcioj validigas ĉiun kampo antaŭ ol la formularo estas sendita. Se iu el la kampoj ne estas ĝusta, la sendado estos malhelpita kaj erarmesaĝo aperos.

JavaScript Form Validation: Pliaj Konsiloj

JavaScript-formulara validigo ne nur plibonigas la uzantaran sperton, sed ankaŭ malpliigas la ŝarĝon sur la servilo. Tamen, estas kelkaj pliaj aferoj, kiujn vi devus konsideri:

• Uzi klarajn mesaĝojn: Se validigo malsukcesas, montrigu al la uzanto klarajn kaj utilajn mesaĝojn, kiuj klarigas kion li aŭ ŝi devus korekti.
• Ne fidu nur je JavaScript: Dum JavaScript-validigo estas utila, ne dependu nur de ĝi. Semantika validigo sur la servilo ankaŭ estas grava por sekureco.
• Kontrolu ĉiujn datumojn: Certigu, ke vi validigas ĉiujn kampojn, eĉ tiujn, kiuj ŝajnas malpli kritikaj, kiel via telefono aŭ postkodo.

Konkludo

JavaScript-formulara validigo estas nekredeble utila ilo por plibonigi la uzantaran sperton kaj certigi, ke la datumoj de la uzantoj estas ĝustaj kaj sekuraj. Ĉu vi validigas retpoŝtojn, telefonnumerojn, aŭ nur certigas, ke ĉiuj kampoj estas plenigitaj, JavaScript faras ĉi tiun taskon facila kaj rapida. Uzu la ekzemplojn ĉi tie por komenci, kaj memoru, ke validigo sur la servilo estas ankaŭ grava por sekureco.