|
Niedawno opublikowałem mój walidator formularzy yFormValidator. W tym artykule pokażę dokładniej możliwości tego bardzo prostego frameworka walidacyjnego.
Jeśli nie interesuje Cię część teoretyczna, skocz do praktyki.
Predefiniowane klasy
yFormValidator posiada kilka z góry zdefiniowanych klas służących do walidacji. Są to:
-
'not empty' - niepusty ciąg znaków
-
'alphanumeric' - litery, cyfry oraz podkreślenie, bez białych znaków
-
'integer' - liczby całkowite (dodatnie i ujemne)
-
'decimal' - liczby rzeczywiste (dodatnie i ujemne)
-
'date' - data w formacie dd/mm/rrrr, od roku 1600 [uwzględnia lata przestępne, liczby dni w miesiącach itp.]
-
'email' - adres e-mail
Nie gwarantuję, że stworzone przeze mnie wyrażenia regularne są prawidłowe i na pewno nie przepuszczą żadnych nieprawidłowych danych.
Własne wyrażenia regularne
Prócz wyżej wymienionych zdefiniowanych klas można podać także własne wyrażenie regularne, istnieją 3 sposoby:
-
rule : /regexp/flags (literał wyrażeń regularnych)
-
rule : new RegExp("regexp", "flags") (konstruktor obiektu RegExp)
-
rule : "regexp" (string)
Kiedy walidacja?
Pole formularza jest walidowane gdy:
-
w obiekcie `items' występuje klucz taki sam jak wartość atrybutu `name' elementu formularza
-
w konfiguracji ustawiono `required = true'
-
pole ma co prawda `required = false' ale posiada jakąś wartość
Prosty przykład
<html>
<head>
<title>Walidacja formularza RegExp</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="/yFormValidator.js"></script>
<script type="text/javascript">
// funkcje potrzebne do odpowiedniego kolorowania formularza
function invalid()
{
this.style.borderColor = "red";
return false;
}
function valid()
{
this.style.borderColor = "green";
return true;
}
window.onload = function()
{
var data = {
form : 'info-form',
error : function(rule)
{
return invalid.call(this);
},
success : function(rule)
{
return valid.call(this);
},
items : {
'name' : { rule : 'not empty', required : true },
'age' : { rule : 'integer', required : false },
'height' : { rule : 'decimal', required : false },
'date' : { rule : 'date', required : true },
'email' : { rule : 'email', required : true },
'site' : { rule : (/^http\:\/\//), required : false }
}
};
yFormValidator( data );
}
</script>
</head>
<body>
<form action="#" id="info-form">
Imię i nazwisko*: <input type="text" name="name" /> (dowolny niepusty ciąg znaków)<br />
Wiek: <input type="text" name="age" /> (liczba całkowita)<br />
Wzrost (w metrach): <input type="text" name="height" /> (liczba rzeczywista)<br />
Data dd/mm/yyyy*: <input type="text" name="date" /> (dd/mm/yyyy), powyżej 1600<br />
E-mail*: <input type="text" name="email" /> (poprawny składniowo adres e-mail)<br />
WWWW : <input type="text" name="site" /> (adres zaczynający się od http)<br />
<input type="submit" value="gotowe" />
</form>
</body>
</html>
Zobacz demo online
Uruchamiając ten przykład możemy dostrzec kilka problemów:
-
wiek, czy wzrost mogą być ujemne, a mimo to przejdą walidację.
-
data może być poprawna, np. "10.10.2000", a mimo to nie przejdzie (wymaganym znakiem jest "/" - nie ".")
-
wzrost może być poprawny, np. "1,65", a mimo to nie przejdzie walidacji (wymagana jest ".", a nie ","). Dodatkowo warto byłoby mieć tylko dwa miejsca po przecinku, a "1.789997788" nadal jest poprawną liczbą rzeczywistą (dodatnią)
Aby to naprawić, spróbujmy wykorzystać funkcje obsługi zdarzeń `error' oraz `success' dla wskazanych pól.
Obsługa zdarzeń
Najpierw naprawię "poprawnie" podany wiek. W funkcji obsługi `success' operator `this' wskazuje na element formularza o atrybucie `name="age"'. Możemy zatem łatwo sprawić jego wartość:
...
'age' : { rule : 'integer', required : false,
success : function()
{
if (this.value < 0)
{
// mogłoby być:
// this.style.borderColor = 'red';
// return false
return invalid.call(this);
}
return valid.call(this);
}
},
...
Zobacz demo online
W tym wypadku w przypadku, kiedy walidacja przejdzie pomyślnie jeszcze raz upewniamy się, czy oby na pewno wszystko jest poprawnie. Jeśli ktoś podał ujemną liczbę zwracamy `false', co jest rozumiane przez skrypt tak samo jakby pole nie przeszło walidacji wyrażeniem regularnym.
Ciekawić Cię może dziwne wywołanie funkcji `valid' oraz `invalid'. Dzięki wykorzystaniu metody `call' wewnątrz tych funkcji operator `this' będzie wskazywał na element fomrularza (czyli na to samo, co wewnątrz funkcji `error'/`success').
...
'date' : { rule : 'date', required : true,
error : function(rule)
{
var val = this.value.replace(/[\-\. \\]/g, "/");
if (rule.test(val))
{
this.value = val;
return valid.call(this);
}
return invalid.call(this);
}
},
...
Zobacz demo online
Został jeszcze jeden przypadek "prawidłowych - nieprawidłowych danych". Kiedy ktoś poda nieszczęsny przecinek zamiast kroki. Prawdziwa zmora programistyczna. A przecież można łatwo załatać:
...
'height' : {
rule : 'decimal',
required : true,
success : function(rule) {
if (this.value > 0)
{
this.value = Number(this.value).toFixed(2);
return valid.call(this);
}
return invalid.call(this);
},
error : function(rule) {
var val = this.value.replace(/[,]/g, ".");
if (rule.test(val) && val > 0)
{
this.value = Number(val).toFixed(2);
return valid.call(this);
}
return invalid.call(this);
}
},
...
Zobacz demo online
Warto przypomnieć, że sam framework ma rozmiar 3,29kB, wersja skompresowana jedynie 1,64kB.
Przydatne linki
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
Komentarze