Home-theater-designers
A JavaScript az egyik legnépszerűbb és sokoldalúbb programozási nyelv, amellyel ma már elkezdheti. Joggal mondják, hogy ez a programozási nyelv a web nyelve, és elengedhetetlen ahhoz, hogy interaktivitást hozzon létre webhelyein.
Az űrlap elem a webhelyek egyik leggyakrabban használt HTML -eleme. Ezek az űrlapok a felhasználótól vesznek fel adatokat, és feldolgozzák a böngészőben vagy a kiszolgálón. Fontos azonban, hogy ezeket a bemeneteket érvényesítse a biztonsági problémák és a nem kívánt hibák kezelése érdekében.
A DOM manipuláció megértése
Mielőtt folytatnánk az ügyféloldali űrlapellenőrzés végrehajtását a JavaScript segítségével, elengedhetetlen, hogy megértsük a dokumentumobjektum-modellt, közismert nevén „DOM”. A DOM egy szabványosított API, amely lehetővé teszi a JavaScript számára, hogy kölcsönhatásba lépjen egy HTML weboldal elemeivel.
További információ: A webhelyek rejtett hőse: A DOM megértése
Az eseményfigyelők hozzáadásához és a felhasználói adatok lekéréséhez meg kell értenie a DOM manipuláció alapjait. Íme egy példa, amely elmagyarázza, hogyan módosíthatja a weboldal tartalmát a DOM API és a JavaScript használatával:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
A fenti kódban a
Most, hogy megértette a DOM manipuláció alapjait, lépjünk tovább, és hajtsuk végre az űrlapellenőrzést.
Űrlapellenőrzés JavaScript segítségével
Különféle típusú bemenetek vehetők át a felhasználóktól. A szöveg típusa, az e -mail típusa, a jelszó típusa, a választógombok és a jelölőnégyzetek a leggyakoribbak, amelyekkel találkozhat. A bemeneti típusok túlnyomó többsége miatt mindegyiknek más logikát kell használnia az érvényesítéshez.
Mielőtt belevágnánk az érvényesítésbe, szánjunk egy pillanatot arra, hogy megértsük a HTML -űrlapokat és azok fontosságát. A HTML-űrlapok az egyik elsődleges módja a webhellyel való interakciónak, mivel lehetővé teszik az adatok bevitelét, a módosítások alkalmazását, az előugró ablakok meghívását, az információk kiszolgálóra küldését stb.
megtalálja a telefonszámomhoz kapcsolt összes fiókot
A HTML elemet ezeknek a felhasználó felé mutató űrlapoknak a létrehozására használják. Így ellenőrizheti a HTML -űrlap bevitelét:
1. E -mail érvényesítés
Akár hitelesítési rendszert épít, akár csak felhasználói e -maileket gyűjt hírleveléhez, fontos, hogy érvényesítse az e -mailt, mielőtt tárolhatja adatbázisában vagy feldolgozhatja. Annak ellenőrzéséhez, hogy egy e -mail megfelel -e az összes szükséges feltételnek, használhatja a reguláris kifejezés .
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. Jelszó érvényesítése
A jelszavak kulcsfontosságú adatok, amelyek biztonságának biztosításához speciális típusú érvényesítésre van szükség. Tekintsünk egy regisztrációs űrlapot, amely két mezőből áll: a jelszó és a jelszó megerősítése mezőkből. Ezen bemenetpárok érvényesítéséhez az alábbiakat kell figyelembe vennie:
- A jelszónak több mint 6 karakter hosszúnak kell lennie.
- A jelszó értékének és a jelszó megerősítése mezőnek meg kell egyeznie.
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. Rádióbemenet érvényesítése
A HTML rádióbemenet egy speciális típusú grafikus vezérlőelem, amely lehetővé teszi a felhasználó számára, hogy csak egyet válasszon az előre meghatározott, egymást kizáró lehetőségek közül. Egy ilyen bemenet gyakori esete a nem kiválasztása. Az ilyen bevitel ellenőrzéséhez ellenőriznie kell, hogy közülük legalább egy kiválasztva van -e.
Ezt a segítségével lehet elérni logikai operátorok mint például az AND ( && ) és nem ( ! ) üzemeltető ilyen módon:
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. Válassza a Bemenet érvényesítése lehetőséget
Az A HTML elemet legördülő lista létrehozására használják. Az címkék a elem határozza meg az elérhető lehetőségeket a legördülő listában. Ezek mindegyike a címkékhez érték attribútum tartozik.
hogyan lehet indítható usb -t készíteni az iso -ból
Az alapértelmezett vagy kezdeti beállításnál beállíthatja értékét üres karakterláncként, így az érvénytelen beállításnak minősül. Az összes többi lehetőségnél állítson be megfelelő értékattribútumot. Íme egy példa arra, hogyan ellenőrizheti a bemeneti elem:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
hogyan lehet felgyorsítani a merevlemezt
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Jelölőnégyzet Érvényesítés
A típus jelölőnégyzet beviteli elemei alapértelmezés szerint jelölőnégyzetekként jelennek meg, amikor aktiválják őket. A jelölőnégyzet segítségével kiválaszthatja az űrlapon benyújtandó egyedi értékeket. A jelölőnégyzetek népszerűek az „elfogadja az általános szerződési feltételeket” bevitelhez.
Ha meg szeretné tudni, hogy egy jelölőnégyzet be van -e jelölve, vagy nem, akkor a jelölőnégyzet bemenetén érheti el az ellenőrzött attribútumot. Íme egy példa:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
A megelőzés jobb mint az orvoslás
Mindig ajánlott a látogatóktól kapott összes bemenet érvényesítése a biztonságos élmény érdekében. A hackerek mindig rosszindulatú adatokat próbálnak bevinni a beviteli mezőkbe, hogy webhelyek közötti parancsfájl-támadásokat és SQL-injekciókat hajtsanak végre.
Most, hogy megértette a HTML -bemenetek érvényesítésének módját, miért nem próbálja ki egy űrlap létrehozásával és a fent látott stratégiák végrehajtásával?
Részvény Részvény Csipog Email Űrlap létrehozása HTML -benEngedélyezze a felhasználóknak, hogy HTML -űrlapokkal vigyenek be adatokat webhelyeikre.
Olvassa tovább Kapcsolódó témák- Programozás
- HTML
- JavaScript
- Webfejlesztés
- Kódolási oktatóanyagok
Nitin lelkes szoftverfejlesztő és számítástechnikai hallgató, aki webes alkalmazásokat fejleszt JavaScript technológiák segítségével. Szabadúszó webfejlesztőként dolgozik, szabadidejében szeret Linuxra és programozásra írni.
Továbbiak Nitin Ranganath -tólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide