logo

JavaScript-formulärvalidering

  1. JavaScript-formulärvalidering
  2. Exempel på JavaScript-validering
  3. JavaScript e-postvalidering

Det är viktigt att validera formuläret som skickats av användaren eftersom det kan ha olämpliga värden. Så, validering är ett måste för att autentisera användare.

JavaScript ger möjlighet att validera formuläret på klientsidan så databearbetning blir snabbare än validering på serversidan. De flesta webbutvecklare föredrar JavaScript-formulärvalidering.

Genom JavaScript kan vi validera namn, lösenord, e-post, datum, mobilnummer och fler fält.


Exempel på JavaScript-formulärvalidering

I det här exemplet ska vi validera namnet och lösenordet. Namnet får inte vara tomt och lösenordet får inte vara mindre än 6 tecken långt.

Här validerar vi formuläret vid inlämning av formulär. Användaren kommer inte att vidarebefordras till nästa sida förrän givna värden är korrekta.

 function validateform(){ var name=document.myform.name.value; var password=document.myform.password.value; if (name==null || name==&apos;&apos;){ alert(&apos;Name can&apos;t be blank&apos;); return false; }else if(password.length<6){ 6 alert('password must be at least characters long.'); return false; } name: <br> Password: <br> </6){>
Testa det nu

Javascript Retype Password Validering

 function matchpass(){ var firstpassword=document.f1.password.value; var secondpassword=document.f1.password2.value; if(firstpassword==secondpassword){ return true; } else{ alert(&apos;password must be same!&apos;); return false; } } Password: <br> Re-enter Password: <br> 
Testa det nu

JavaScript-nummervalidering

Låt oss validera textfältet endast för numeriska värden. Här använder vi funktionen isNaN().

 function validate(){ var num=document.myform.num.value; if (isNaN(num)){ document.getElementById(&apos;numloc&apos;).innerHTML=&apos;Enter Numeric value only&apos;; return false; }else{ return true; } } Number: <span id="numloc"></span> <br> 
Testa det nu

JavaScript-validering med bild

Låt oss se ett interaktivt JavaScript-formulärvalideringsexempel som visar korrekt och felaktig bild om inmatningen är korrekt eller felaktig.

 function validate(){ var name=document.f1.name.value; var password=document.f1.password.value; var status=false; if(name.length<1){ document.getelementbyid('nameloc').innerhtml="  Please enter your name" ; status="false;" }else{ } if(password.length<6){ document.getelementbyid('passwordloc').innerhtml="  Password must be at least 6 char long" return status; <table class="table"> <tr><td>Enter Name:</td><td> <span id="nameloc"></span></td></tr> <tr><td>Enter Password:</td><td> <span id="passwordloc"></span></td></tr> <tr><td></td></tr>  </1){>
Testa det nu

Produktion:

Skriv namn:
Skriv in lösenord:

JavaScript e-postvalidering

Vi kan validera e-postmeddelandet med hjälp av JavaScript.

Det finns många kriterier som måste följas för att validera e-post-ID:t, till exempel:

  • e-post-id måste innehålla @ och . karaktär
  • Det måste finnas minst ett tecken före och efter @.
  • Det måste finnas minst två tecken efter . (punkt).

Låt oss se det enkla exemplet för att validera e-postfältet.

 function validateemail() { var x=document.myform.email.value; var atposition=x.indexOf(&apos;@&apos;); var dotposition=x.lastIndexOf(&apos;.&apos;); if (atposition<1 || dotposition="x.length){" alert('please enter a valid e-mail address 
 atpostion:'+atposition+'
 dotposition:'+dotposition); return false; } email: <br> </1>
Testa det nu