Kā īstenot klienta puses veidlapas validāciju, izmantojot JavaScript

Kā īstenot klienta puses veidlapas validāciju, izmantojot JavaScript

JavaScript ir viena no populārākajām un daudzpusīgākajām programmēšanas valodām, ar kurām varat sākt strādāt jau šodien. Šī programmēšanas valoda pamatoti tiek uzskatīta par tīmekļa valodu, un tā ir būtiska, lai jūsu vietnēm pievienotu interaktivitāti.





Veidlapas elements ir viens no visbiežāk izmantotajiem HTML elementiem vietnēs. Šīs veidlapas ņem ievadi no lietotāja un apstrādā to pārlūkprogrammā vai serverī. Tomēr ir svarīgi apstiprināt šos datus, lai novērstu drošības problēmas un nevēlamas kļūdas.



Izpratne par DOM manipulācijām

Pirms mēs sākam īstenot klienta veidlapas validāciju, izmantojot JavaScript, ir svarīgi saprast dokumenta objekta modeli, ko parasti sauc par “DOM”. DOM ir standartizēta API, kas ļauj JavaScript mijiedarboties ar HTML tīmekļa lapas elementiem.





Uzziniet vairāk: Vietņu slēptais varonis: izpratne par DOM

Lai pievienotu notikumu klausītājus un izgūtu lietotāju ievadīto informāciju, jums ir jāsaprot DOM manipulācijas pamati. Šeit ir piemērs, kas izskaidro, kā varat mainīt tīmekļa lapas saturu, izmantojot DOM API un JavaScript:









Document





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

Iepriekš minētajā kodā ,.

tagam ir ID paragrāfs . Rakstot JavaScript kodu, varat piekļūt šim elementam, zvanot uz document.getElementById ('punkts') metodi un manipulējot ar tās vērtību.

Tagad, kad esat sapratis DOM manipulācijas pamatus, sāksim darbu un ieviesīsim veidlapu validāciju.



Veidlapas validācija ar JavaScript

Ir dažādi ievades veidi, ko varat saņemt no lietotāja. Teksta veids, e -pasta veids, paroles veids, radio pogas un izvēles rūtiņas ir daži no visbiežāk sastopamajiem. Sakarā ar šo lielāko daļu ievades veidu, lai apstiprinātu katru no tiem, jums būs jāizmanto cita loģika.

Pirms iedziļināties validācijā, veltīsim laiku, lai izprastu HTML veidlapas un to nozīmi. HTML veidlapas ir viens no galvenajiem veidiem, kā mijiedarboties ar vietni, jo tās ļauj ievadīt datus, lietot izmaiņas, izsaukt uznirstošos logus, iesniegt informāciju serverim un veikt citas darbības.



kā noņemt bloatware no Windows 10

HTML elements tiek izmantots, lai izveidotu šīs lietotājam paredzētās veidlapas. Tālāk ir norādīts, kā varat apstiprināt HTML veidlapas ievadīto informāciju.

1. E -pasta validācija

Neatkarīgi no tā, vai veidojat autentifikācijas sistēmu vai vienkārši apkopojat lietotāja e -pastus savam biļetenam, ir svarīgi to apstiprināt, pirms varat to saglabāt savā datu bāzē vai apstrādāt. Lai pārbaudītu, vai e -pasts atbilst visiem nepieciešamajiem nosacījumiem, varat izmantot a regulāra izteiksme .

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. Paroles validācija

Paroles ir būtiska informācija, kuras drošībai nepieciešama īpaša veida validācija. Apsveriet reģistrācijas veidlapu, kurā ir divi lauki: parole un apstipriniet paroles laukus. Lai apstiprinātu šos ievades pārus, ir jāņem vērā dažas lietas:

  • Parolei jābūt garākai par 6 rakstzīmēm.
  • Paroles vērtībai un apstiprinājuma paroles laukam ir jābūt vienādiem.

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. Radio ieejas validācija

HTML radio ievade ir īpaša veida grafiskais vadības elements, kas ļauj lietotājam izvēlēties tikai vienu no iepriekš definētām savstarpēji izslēdzošām opcijām. Šādas ievades bieži izmanto dzimuma atlasei. Lai apstiprinātu šādu ievadi, jums jāpārbauda, ​​vai ir atlasīts vismaz viens no tiem.

To var panākt, izmantojot loģiskie operatori piemēram, AND ( && ) un nē ( ! ) operators šādā veidā:

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. Atlasiet Ievades validācija

The HTML elements tiek izmantots, lai izveidotu nolaižamo sarakstu. The tagi elements definējiet pieejamās opcijas nolaižamajā sarakstā. Katrs no šiem tagi ir saistīti ar vērtības atribūtu.

cik daudz naudas jūs varat nopelnīt bitcoin

Noklusējuma vai sākotnējai opcijai varat iestatīt tā vērtību kā tukšu virkni, lai tā tiktu uzskatīta par nederīgu opciju. Visām pārējām opcijām iestatiet atbilstošu vērtības atribūtu. Šeit ir piemērs tam, kā jūs varat apstiprināt a ievades elements:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

Windows nevarēja automātiski noteikt šī tīkla starpniekservera iestatījumus windows 7
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Atzīmējiet izvēles rūtiņu Validation

Tipa izvēles rūtiņas ievades elementi pēc noklusējuma tiek atveidoti kā rūtiņas, kuras tiek aktivizētas vai atzīmētas. Atzīmējot izvēles rūtiņu, varat atlasīt atsevišķas vērtības iesniegšanai veidlapā. Atzīmējiet izvēles rūtiņas, lai ievadītu “pieņemt noteikumus un nosacījumus”.

Lai uzzinātu, vai ir atzīmēta izvēles rūtiņa, varat piekļūt atzīmētajam atribūtam izvēles rūtiņas ievadē. Šeit ir piemērs:

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.');
}

Profilakse ir labāka nekā ārstēšana

Lai nodrošinātu drošu pieredzi, vienmēr ieteicams apstiprināt visas ievadītās ziņas, ko saņemat no apmeklētāja. Hakeri vienmēr cenšas ievadīt ļaunprātīgus datus ievades laukos, lai veiktu skriptu uzbrukumus vietnēm un SQL injekcijas.

Tagad, kad saprotat, kā apstiprināt HTML ievadi, kāpēc neizmēģināt, izveidojot veidlapu un īstenojot iepriekš redzētās stratēģijas?

Kopīgot Kopīgot Čivināt E -pasts Kā izveidot veidlapu HTML formātā

Ļaujiet lietotājiem ievadīt datus jūsu vietnēs, izmantojot HTML veidlapas.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • HTML
  • JavaScript
  • Web izstrāde
  • Kodēšanas apmācības
Par autoru Nitin Ranganath(31 raksts publicēts)

Nitins ir dedzīgs programmatūras izstrādātājs un datortehnikas students, kurš izstrādā tīmekļa lietojumprogrammas, izmantojot JavaScript tehnoloģijas. Viņš strādā kā ārštata tīmekļa izstrādātājs, un brīvajā laikā viņam patīk rakstīt Linux un programmēšanai.

Vairāk no Nitin Ranganath

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu