Validari cu javascript [ Partea I, pentru incepatori ]

Post Title

        In ultima perioada limbajul javascript evolueaza, inca nu il stapanesc insa va pot impartasi si voua ceea ce stiu eu, iar in acest tutorial o sa va prezint validarea in client side , cu alte cuvinte fara a fi nevoit de a face un request la server, mai jos o sa va prezint o metoda de validare la evenimentul onfocusout ceea ce face o validare a fi foarte eleganta, mai jos o sa prezint codul 

  1.  
  2. <html>
  3. <head>
  4. <title>Validarea cu javascript</title>
  5.  
  6. <script>
  7. function valideaza(type,ob){
  8. var valoare,
  9. eroare = '',
  10. sex = [1,2,5,6];
  11.  
  12. switch(type){
  13.  
  14. case 'nume':
  15. valoare = ob.value;
  16. if (valoare.length < 3) {
  17. eroare = "Nu ai introdus nici un nume\n";
  18. }
  19. break;
  20.  
  21. case 'prenume':
  22. valoare = ob.value;
  23. if (valoare.length < 3) {
  24. eroare = "Nu ai introdus nici un prenume\n";
  25. }
  26. break;
  27.  
  28. case 'cnp':
  29. valoare = ob.value;
  30. if (valoare.length != 13) {
  31. eroare += "Lungimea cnp-ului este incorecta\n";
  32. }
  33. if (!parseInt(valoare)) {
  34. eroare += "Cnp incorect\n";
  35. }
  36. if (sex.indexOf(valoare.charAt(0)) == -1) {
  37. eroare += "Cnp-ul incepe cu 1,2,5 sau 6\n";
  38. }
  39. break;
  40. case 'varsta':
  41. valoare = ob.value;
  42. if (!parseInt(valoare)) {
  43. eroare += "Varsta incorecta\n";
  44. }
  45. if (valoare.length > 3) {
  46. eroare += "Cum ai reusit sa traiesti atat???\n";
  47. }
  48. break;
  49. case 'greutate':
  50. valoare = ob.value;
  51. if (!parseInt(valoare)) {
  52. eroare += " Reintrodu Greutatea\n";
  53. }
  54. if (valoare.length > 3 && parseInt(valoare)) {
  55. eroare += "Esti mult prea greu reintrodu greutatea\n";
  56. }
  57. break;
  58. }
  59. if(eroare){
  60. alert(eroare);
  61. }
  62. }
  63. </script>
  64. </head>
  65. <body>
  66. <table>
  67. <tr>
  68. <td>Nume: </td>
  69. <td><input onfocusout="valideaza('nume',this)" type = "text" name = ""></td>
  70. </tr>
  71. <tr>
  72. <td>Prenume: </td>
  73. <td><input onfocusout="valideaza('prenume',this)" type = "text" name = ""></td>
  74. </tr>
  75. <tr>
  76. <td>Cnp : </td>
  77. <td><input onfocusout="valideaza('cnp',this)" size="13" type = "text" name = ""></td>
  78. </tr>
  79. <tr>
  80. <td>Varsta: </td>
  81. <td><input onfocusout="valideaza('varsta',this)" type = "text" name = ""></td>
  82. </tr>
  83. <tr>
  84. <td>Greutate: </td>
  85. <td><input onfocusout="valideaza('greutate',this)" type = "text" name = ""></td>
  86. </tr>
  87. </table>
  88. </body>
  89. </html>

       Daca o sa il testati, o sa vedeti ca daca ati incercat sa completati un input apoi ati trecut la atlul o sa primiti o alerta de eroare care o sa va anunte ca textul introdus este eronat, exemplu :

       Am omis sa introduc  ceva in prenume, astfel am primit mesaj de alerta, vara a fi nevoie sa fac un submit sa imi zica serverul ca nu am introdus ceva in acel camp.

       Daca o sa observati validarile nu sunt perfecte, la cnp cel putin mai sunt cateva chestii de indeplinit, insa am ales ceva usor special pentru incepatori.

O sa explic 2 chestii mici, mai cu seamna 2 metode :

1. IndexOf 

       Metoda poate fi folosita atat pe stringuri cat si array-uri eu am folosito pe un array, si dupa cum cred ca ati realizat returneaza indexul stringului cautat, daca e in array returneza key-ul daca e in string returneaza pozitia, eu l-am folosit mai sus cu scopul de a cauta in array, asemnea cu array_search() din php.

2. charAt

       Aceasta metoda cum cred ca ati realizat returneaza caracterul de pe pozita n dintr-un sir.

 

       Ambele functii combinate pot duce cu gandul la in_array() din php.

 

        Cam atat in accest mic tutorial doarece cel mai bine o sa intelegeti daca o sa  intrebati ce nu stiti (recunosc l-am facut acum deoarece sper sa fiu tot anul activ :)) ). Stiu ca tutorialul e saracacios si putin explicat dar consider ca putini cititori ai accestui site vor intelege despe ce e vorba, iar daca nu intelegeti o sa astept sugestii cu ce sa adaug sau ce tutoriale ar trebui sa mai scriu sa il intelegeti pe acesta.  Un 2014 fericit!

Autor articol

Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)
 

Articolul anterior


Comentarii

Comentariu adaugat de marian
Nu l-am facut cu submit, poate fi imbunatatit, m-am concentrat pe validari sa fie simplu si sa inteleaga lumea, ma bucur ca iti foloseste
go to page top marian | 2014-01-03
Comentariu adaugat de webetwas
este ok verificat si merge cum trebuie si fara but de validare
go to page top webetwas | 2014-01-03
Comentariu adaugat de webetwas
este f ok numai ca nu are butonul de send sau ok :) dar il rezolv eu la mine. La Multi Ani !!! ptr noul an
go to page top webetwas | 2014-01-03

Exista 3 comentarii   

  • 1
Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare Logare cu Facebook
top