Asiakaspuolen lomakkeen vahvistuksen toteuttaminen JavaScriptin avulla

Asiakaspuolen lomakkeen vahvistuksen toteuttaminen JavaScriptin avulla

JavaScript on yksi suosituimmista ja monipuolisimmista ohjelmointikielistä, jonka kanssa voit aloittaa jo tänään. Tämä ohjelmointikieli on oikeutetusti sanottu web -kieleksi ja on välttämätön interaktiivisuuden lisäämiseksi verkkosivustoillesi.





Lomake -elementti on yksi verkkosivustojen käytetyimmistä HTML -elementeistä. Nämä lomakkeet ottavat syötteen käyttäjältä ja käsittelevät sitä selaimessa tai palvelimessa. On kuitenkin tärkeää vahvistaa nämä syötteet turvallisuusongelmien ja ei -toivottujen virheiden ratkaisemiseksi.



DOM -manipuloinnin ymmärtäminen

Ennen kuin aloitamme asiakaspuolen lomakkeen vahvistamisen JavaScriptin avulla, on tärkeää ymmärtää asiakirjaobjektimalli, joka tunnetaan yleisesti nimellä 'DOM'. DOM on standardoitu sovellusliittymä, jonka avulla JavaScript voi olla vuorovaikutuksessa HTML -verkkosivun elementtien kanssa.





Lisätietoja: Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

Jotta voit lisätä tapahtumakuuntelijoita ja hakea käyttäjien syötteitä, sinun on ymmärrettävä DOM -käsittelyn perusteet. Tässä on esimerkki siitä, miten voit muuttaa verkkosivun sisältöä DOM -sovellusliittymän ja JavaScriptin avulla:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

Yllä olevassa koodissa

tunnisteella on tunnus kohta . Kun kirjoitat JavaScript -koodia, voit käyttää tätä elementtiä soittamalla document.getElementById ('kohta') menetelmä ja manipuloida sen arvoa.

Nyt kun olet ymmärtänyt DOM -manipuloinnin perusteet, siirry eteenpäin ja ota käyttöön lomakkeen vahvistus.



Lomakkeen vahvistus JavaScriptin avulla

Käyttäjä voi ottaa erilaisia ​​tuloja. Tekstityyppi, sähköpostityyppi, salasanatyyppi, valintanapit ja valintaruudut ovat yleisimpiä, joita saatat kohdata. Näistä valtaosasta syötetyypeistä johtuen sinun on käytettävä eri logiikkaa kunkin validoimiseksi.

Ennen kuin syvennymme validointiin, otamme hetken ymmärtää HTML -lomakkeet ja niiden tärkeyden. HTML-lomakkeet ovat yksi tärkeimmistä tavoista, joilla olet vuorovaikutuksessa verkkosivuston kanssa, sillä niiden avulla voit syöttää tietoja, tehdä muutoksia, avata ponnahdusikkunoita, lähettää tietoja palvelimelle ja paljon muuta.



kuinka näet poistetun youtube -videon otsikon

HTML elementtiä käytetään näiden käyttäjälle suunnattujen lomakkeiden luomiseen. Näin voit vahvistaa HTML -lomakkeen syötteet:

1. Sähköpostin vahvistus

Rakennatpa todennusjärjestelmää tai keräät vain käyttäjäsähköpostia uutiskirjeellesi, on tärkeää vahvistaa sähköposti ennen kuin voit tallentaa sen tietokantaasi tai käsitellä sitä. Voit tarkistaa, täyttääkö sähköposti kaikki vaaditut ehdot, käyttämällä a tavallinen ilme .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Salasanan vahvistus

Salasanat ovat tärkeä tieto, jonka turvallisuuden varmistamiseksi tarvitaan erityinen vahvistus. Harkitse rekisteröintilomaketta, jossa on kaksi kenttää: salasana ja vahvista salasanakentät. Näiden syöttöparien vahvistamiseksi sinun on otettava huomioon seuraavat asiat:

  • Salasanan on oltava yli 6 merkkiä pitkä.
  • Salasanan arvon ja vahvista salasana -kentän on oltava samat.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Radiotulon validointi

HTML -radiotulo on erityinen graafinen ohjauselementti, jonka avulla käyttäjä voi valita vain yhden ennalta määritetyistä toisiaan poissulkevista vaihtoehdoista. Tällaisen syötteen yleinen käyttötapa olisi sukupuolen valinta. Tällaisen syötteen vahvistamiseksi sinun on tarkistettava, onko vähintään yksi niistä valittu.

Tämä voidaan saavuttaa käyttämällä loogiset operaattorit kuten AND ( && ) ja ei ( ! ) operaattori tällä tavalla:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Valitse Tulon validointi

The HTML-elementtiä käytetään avattavan luettelon luomiseen. The tunnisteet elementti määrittää käytettävissä olevat vaihtoehdot avattavasta luettelosta. Jokainen näistä tunnisteisiin on liitetty arvoattribuutti.

kuinka säätää windows 10 pelaamista varten

Oletus- tai alkuasetukselle voit asettaa sen arvon tyhjäksi merkkijonoksi, jotta se katsotaan virheelliseksi. Määritä kaikille muille vaihtoehdoille sopiva arvoattribuutti. Tässä on esimerkki siitä, kuinka voit vahvistaa a syöttöelementti:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

kuinka lukea Mac -kiintolevyä tietokoneella
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Valintaruudun vahvistus

Tyyppivalintaruudun syöttöelementit näytetään oletusarvoisesti laatikoina, jotka valitaan tai valitaan, kun ne aktivoidaan. Valintaruudun avulla voit valita lomakkeelle lähetettävät yksittäiset arvot. Valintaruudut ovat suosittu valinta 'hyväksy ehdot'.

Voit tarkistaa, onko valintaruutu valittuna vai ei, käyttämällä tarkastetun määritteen valintaruudun tuloa. Tässä on esimerkki:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Ennaltaehkäisy on parempi kuin hoito

On aina suositeltavaa validoida kaikki vierailijalta saamasi syötteet turvallisen kokemuksen takaamiseksi. Hakkerit yrittävät aina syöttää haitallisia tietoja syöttökenttiin suorittaakseen sivustojen välisiä komentosarjoja ja SQL-injektioita.

Nyt kun ymmärrät, miten HTML -syötteesi vahvistetaan, miksi et kokeilisi sitä luomalla lomake ja toteuttamalla yllä näkemäsi strategiat?

Jaa Jaa Tweet Sähköposti Lomakkeen luominen HTML -muodossa

Salli käyttäjien syöttää tietoja verkkosivustoillesi HTML -lomakkeilla.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • HTML
  • JavaScript
  • Verkkokehitys
  • Koodausoppaat
Kirjailijasta Nitin Ranganath(31 artikkelia julkaistu)

Nitin on innokas ohjelmistokehittäjä ja tietotekniikan opiskelija, joka kehittää verkkosovelluksia JavaScript -tekniikoilla. Hän työskentelee freelance -verkkokehittäjänä ja tykkää kirjoittaa vapaa -ajallaan Linuxille ja ohjelmoinnille.

Lisää Nitin Ranganathilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi