{"id":91819,"date":"2022-10-12T06:16:42","date_gmt":"2022-10-12T11:16:42","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-implementerar-formularvalidering-pa-klientsidan-med-javascript\/"},"modified":"2022-10-12T06:16:42","modified_gmt":"2022-10-12T11:16:42","slug":"hur-man-implementerar-formularvalidering-pa-klientsidan-med-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-implementerar-formularvalidering-pa-klientsidan-med-javascript\/","title":{"rendered":"Hur man implementerar formul\u00e4rvalidering p\u00e5 klientsidan med JavaScript"},"content":{"rendered":"
\n

JavaScript \u00e4r ett av de mest popul\u00e4ra och m\u00e5ngsidiga programmeringsspr\u00e5ken som du kan komma ig\u00e5ng med idag. Detta programmeringsspr\u00e5k s\u00e4gs med r\u00e4tta vara webbens spr\u00e5k och \u00e4r viktigt f\u00f6r att l\u00e4gga till interaktivitet p\u00e5 dina webbplatser.<\/p>\n

Formelementet \u00e4r ett av de mest anv\u00e4nda HTML-elementen p\u00e5 webbplatser. Dessa formul\u00e4r tar input fr\u00e5n anv\u00e4ndaren och bearbetar det i webbl\u00e4saren eller servern. Det \u00e4r dock viktigt att validera dessa indata f\u00f6r att hantera s\u00e4kerhetsproblem och o\u00f6nskade buggar.<\/p>\n

<\/span> F\u00f6rst\u00e5 DOM-manipulation<\/span><\/h2>\n

Innan vi forts\u00e4tter att implementera formul\u00e4rvalidering p\u00e5 klientsidan med JavaScript \u00e4r det viktigt att f\u00f6rst\u00e5 dokumentobjektmodellen, allm\u00e4nt k\u00e4nd som \u201cDOM\u201d. DOM \u00e4r ett standardiserat API som till\u00e5ter JavaScript att interagera med element p\u00e5 en HTML-webbsida.<\/p>\n

F\u00f6r att l\u00e4gga till h\u00e4ndelseavlyssnare och h\u00e4mta anv\u00e4ndarindata m\u00e5ste du f\u00f6rst\u00e5 grunderna f\u00f6r DOM-manipulation. H\u00e4r \u00e4r ett exempel som f\u00f6rklarar hur du kan \u00e4ndra webbsidans inneh\u00e5ll med hj\u00e4lp av DOM API och JavaScript:<\/p>\n

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" \/><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><title>Document<\/title><\/head><body><p id=\"paragraph\"><\/p><\/body><script>const paragraph = document.getElementById('parapgraph');paragraph.innerText=\"This is a paragraph tag\";<\/script><\/html><\/pre>\n
I ovanst\u00e5ende kod, <\/p>\n
 taggen har ett id f\u00f6r paragraf<\/strong>.  N\u00e4r du skriver JavaScript-koden kan du komma \u00e5t detta element genom att anropa document.getElementById(\u2018paragraph\u2019)<\/strong> metod och manipulera dess v\u00e4rde.<\/p>\n
Nu n\u00e4r du har f\u00f6rst\u00e5tt grunderna i DOM-manipulation, l\u00e5t oss g\u00e5 vidare och implementera formul\u00e4rvalidering.<\/p>\n
<\/span>  Formul\u00e4rvalidering med JavaScript<\/span><\/h2>\n
Det finns olika typer av input som du kan ta fr\u00e5n en anv\u00e4ndare.  Texttyp, e-posttyp, l\u00f6senordstyp, alternativknappar och kryssrutor \u00e4r n\u00e5gra av de vanligaste som du kan st\u00f6ta p\u00e5.  P\u00e5 grund av dessa stora flertalet indatatyper kommer du att beh\u00f6va anv\u00e4nda olika logik f\u00f6r att validera var och en av dem.<\/p>\n
Innan vi g\u00e5r in i validering, l\u00e5t oss ta en stund f\u00f6r att f\u00f6rst\u00e5 HTML-formul\u00e4r och deras betydelse.  HTML-formul\u00e4r \u00e4r ett av de prim\u00e4ra s\u00e4tten du interagerar med webbplatsen eftersom de l\u00e5ter dig ange dina data, till\u00e4mpa \u00e4ndringar, anropa popup-f\u00f6nster, skicka information till en server och mer.<\/p>\n
HTML <\/p>\n
 element anv\u00e4nds f\u00f6r att skapa dessa anv\u00e4ndarv\u00e4nda formul\u00e4r.  S\u00e5 h\u00e4r kan du validera inmatningarna i ett HTML-formul\u00e4r:<\/p>\n
<\/span>1. E-postvalidering<\/span><\/h3>\n
Oavsett om du bygger ett autentiseringssystem eller bara samlar in anv\u00e4ndarnas e-postmeddelanden till ditt nyhetsbrev, \u00e4r det viktigt att validera e-postmeddelandet innan du kan lagra det i din databas eller bearbeta det.  F\u00f6r att kontrollera om ett e-postmeddelande uppfyller alla villkor som kr\u00e4vs kan du anv\u00e4nda ett regulj\u00e4rt uttryck.<\/p>\n
HTML:<\/strong><\/p>\n
<input type=\"email\" placeholder=\"[email\u00a0protected]<\/a>\" id=\"email\" required \/><\/pre>\n
JavaScript:<\/strong><\/p>\n
const emailInput = document.getElementById('email');const emailRegex = \/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email\u00a0protected]<\/a>[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\/;if (!emailInput.value.match(emailRegex)) {alert('Invalid email address.');}<\/pre>\n
<\/span>2. L\u00f6senordsvalidering<\/span><\/h3>\n
L\u00f6senord \u00e4r en viktig del av data som beh\u00f6ver en speciell typ av validering f\u00f6r att s\u00e4kerst\u00e4lla dess s\u00e4kerhet.  \u00d6verv\u00e4g att ett registreringsformul\u00e4r har tv\u00e5 f\u00e4lt: l\u00f6senord och bekr\u00e4fta l\u00f6senord.  F\u00f6r att validera dessa indatapar, h\u00e4r \u00e4r n\u00e5gra saker du m\u00e5ste t\u00e4nka p\u00e5:<\/p>\n
  L\u00f6senordet m\u00e5ste vara mer \u00e4n 6 tecken l\u00e5ngt.  V\u00e4rdet p\u00e5 l\u00f6senordet och f\u00e4ltet f\u00f6r bekr\u00e4ftelse av l\u00f6senord m\u00e5ste vara samma.  <\/p>\n
HTML:<\/strong><\/p>\n
<input type=\"password\" placeholder=\"Enter your password\" id=\"password\" required \/><input type=\"password\" placeholder=\"Enter your password\" id=\"confirm-password\" required \/><\/pre>\n
JavaScript:<\/strong><\/p>\n
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')}<\/pre>\n
<\/span>3. Radioing\u00e5ngsvalidering<\/span><\/h3>\n
HTML-radioing\u00e5ng \u00e4r en speciell typ av grafiskt kontrollelement som l\u00e5ter anv\u00e4ndaren v\u00e4lja endast ett av en f\u00f6rdefinierad upps\u00e4ttning alternativ som utesluter varandra.  Ett vanligt anv\u00e4ndningsfall f\u00f6r en s\u00e5dan ing\u00e5ng skulle vara att v\u00e4lja k\u00f6n.  F\u00f6r att validera s\u00e5dan inmatning m\u00e5ste du kontrollera om minst en av dem \u00e4r vald.<\/p>\n
Detta kan uppn\u00e5s med hj\u00e4lp av logiska operatorer som AND (&&<\/strong>) och inte (!<\/strong>) operat\u00f6r p\u00e5 detta s\u00e4tt:<\/p>\n
HTML:<\/strong><\/p>\n
<label for=\"male\">Male<\/label><input type=\"radio\" id=\"male\" name=\"gender\" value=\"male\" \/><label for=\"female\">Female<\/label><input type=\"radio\" id=\"female\" name=\"gender\" value=\"female\" \/><label for=\"others\">Others<\/label><input type=\"radio\" id=\"others\" name=\"gender\" value=\"others\" \/><\/pre>\n
JavaScript:<\/strong><\/p>\n
const genders = document.getElementsByName(\"gender\");const validForm = false;let i = 0;while (!validForm && i < radios.length) {if (radios[i].checked) validForm = true;i++; }if (!validForm) alert(\"Must check some option!\");<\/pre>\n
<\/span>4. V\u00e4lj Indatavalidering<\/span><\/h3>\n
De <\/strong> HTML-element anv\u00e4nds f\u00f6r att skapa en rullgardinslista.  De  <\/alternativ><\/strong>taggar inuti <\/strong> element definiera de tillg\u00e4ngliga alternativen i rullgardinsmenyn.  Var och en av de h\u00e4r  <\/alternativ><\/strong>taggar har ett v\u00e4rdeattribut kopplat till dem.<\/p>\n
F\u00f6r standardalternativet eller initialalternativet kan du st\u00e4lla in dess v\u00e4rde till en tom str\u00e4ng s\u00e5 att det kommer att betraktas som ett ogiltigt alternativ.  F\u00f6r alla andra alternativ, st\u00e4ll in ett l\u00e4mpligt v\u00e4rdeattribut.  H\u00e4r \u00e4r ett exempel p\u00e5 hur du kan validera en  <\/v><\/strong>ing\u00e5ngselement:<\/p>\n
HTML:<\/strong><\/p>\n
<select id=\"title\" required><option value=\"\">Select One<\/option><option value=\"Mr\">Mr<\/option><option value=\"Mrs\">Mrs<\/option><option value=\"Ms\">Ms<\/option><\/select><\/pre>\n
JavaScript:<\/strong><\/p>\n
const title = document.getElementById('title');if (title.value = \"\") {alert('Please select a title');}<\/pre>\n
<\/span>5. Kryssruta Validering<\/span><\/h3>\n
Inmatningselement av typen kryssruta \u00e5terges som standard som rutor som markeras eller markeras n\u00e4r de aktiveras.  En kryssruta l\u00e5ter dig v\u00e4lja enskilda v\u00e4rden f\u00f6r inl\u00e4mning i ett formul\u00e4r.  Kryssrutor \u00e4r ett popul\u00e4rt val f\u00f6r \u201cacceptera villkoren\u201d.<\/p>\n
F\u00f6r att ta reda p\u00e5 om en kryssruta \u00e4r markerad eller inte, kan du komma \u00e5t det markerade attributet p\u00e5 kryssrutans ing\u00e5ng.  H\u00e4r \u00e4r ett exempel:<\/p>\n
HTML:<\/strong><\/p>\n
<input type=\"checkbox\" id=\"terms\"><label for=\"terms\">I agree to the terms and conditions<\/label><\/pre>\n
JavaScript:<\/strong><\/p>\n
const terms = document.getElementById('terms');if (!terms.checked) {alert('Please agree to the terms and conditions to proceed further.');}<\/pre>\n
<\/span>  Att f\u00f6rebygga \u00e4r b\u00e4ttre \u00e4n att bota<\/span><\/h2>\n
Det rekommenderas alltid att validera alla indata som du f\u00e5r fr\u00e5n en bes\u00f6kare f\u00f6r att ge en s\u00e4ker och s\u00e4ker upplevelse.  Hackare f\u00f6rs\u00f6ker alltid l\u00e4gga in skadlig data i inmatningsf\u00e4lten f\u00f6r att utf\u00f6ra cross-site scripting attacker och SQL-injektioner.<\/p>\n
Nu n\u00e4r du f\u00f6rst\u00e5r hur du validerar dina HTML-indata, varf\u00f6r inte prova det genom att skapa ett formul\u00e4r och implementera strategierna du har sett ovan?<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Nitin Ranganath (39 artiklar publicerade)
<\/strong><\/p>\n
Nitin \u00e4r en ivrig mjukvaruutvecklare och en datoringenj\u00f6rsstudent som utvecklar webbapplikationer med JavaScript-teknik.  Han arbetar som frilansande webbutvecklare och gillar att skriva f\u00f6r Linux och programmering i sin free tid. <\/p>\n
                            Mer fr\u00e5n Nitin Ranganath<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/form>\n<\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n