logo

Walidacja formularza JavaScript

  1. Walidacja formularza JavaScript
  2. Przykład walidacji JavaScript
  3. Walidacja poczty e-mail JavaScript

Ważne jest, aby sprawdzić poprawność formularza przesłanego przez użytkownika, ponieważ może on zawierać nieprawidłowe wartości. Zatem weryfikacja jest konieczna do uwierzytelnienia użytkownika.

JavaScript umożliwia sprawdzanie poprawności formularza po stronie klienta, dzięki czemu przetwarzanie danych będzie szybsze niż sprawdzanie poprawności po stronie serwera. Większość twórców stron internetowych preferuje sprawdzanie poprawności formularzy JavaScript.

c sformatowany ciąg

Za pomocą JavaScript możemy zweryfikować nazwę, hasło, adres e-mail, datę, numery telefonów komórkowych i inne pola.


Przykład walidacji formularza JavaScript

W tym przykładzie sprawdzimy nazwę i hasło. Nazwa nie może być pusta, a hasło nie może być krótsze niż 6 znaków.

Tutaj sprawdzamy poprawność formularza po przesłaniu formularza. Użytkownik nie zostanie przekierowany na następną stronę, dopóki podane wartości nie będą prawidłowe.

 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){>
Przetestuj teraz

Weryfikacja hasła wpisz ponownie w JavaScript

 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> 
Przetestuj teraz

Walidacja numeru JavaScript

Zweryfikujmy pole tekstowe tylko pod kątem wartości numerycznej. Tutaj używamy funkcji 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> 
Przetestuj teraz

Walidacja JavaScript z obrazem

Zobaczmy interaktywny przykład sprawdzania poprawności formularza JavaScript, który wyświetla poprawny i niepoprawny obraz, jeśli wprowadzone dane są prawidłowe lub niepoprawne.

 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){>
Przetestuj teraz

Wyjście:

Wprowadź imię:
Wprowadź hasło:

Walidacja poczty e-mail JavaScript

Możemy zweryfikować wiadomość e-mail za pomocą JavaScript.

c# data i godzina

Aby zweryfikować identyfikator e-mail, należy spełnić wiele kryteriów, takich jak:

  • Identyfikator e-mail musi zawierać @ i . postać
  • Przed i po @ musi znajdować się co najmniej jeden znak.
  • Po . muszą znajdować się co najmniej dwa znaki. (kropka).

Zobaczmy prosty przykład sprawdzania poprawności pola e-mail.

 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>
Przetestuj teraz