Praca z formularzami / Zrozumieć obiekt RegExp w JavaScript / JavaScript / Artykuły / Wortal / Home

Praca z formularzami

Teraz skoro wiesz, jak to wszystko działa, spróbujmy zastosować tą wiedzę w praktyce. Popatrz na poniższy przykład, który przedstawia formularz HTML, w którym użytkownik podaje informacje o swojej karcie kredytowej i emailu, potrzebne do sfinalizowania zamówienia:

<html> 
<html>
<head>
<script language="Javascript">
<!-- ukrywanie kodu
 
// wymaga wyrażenia, aby dopasować go jako parametr 
function sprawdzPole(Formularz, Pole, Nazwa, obiektRegex) {
 
 obiektPole = eval("document." + Formularz + "." + Pole);
 
 if(!obiektRegex.test(obiektPole.value))  {
  alert ("Proszę podać właściwą wartość pola " + Nazwa + "");
  obiektPole.select();
  
obiektPole.focus();
  return (false);
 }
 
return (true);
}
 
// wyrażenia regularne dla różnych pól 
 
// numer karty kredytowej 
// dokładnie 20 cyfr 
obiektNumerKarty = /^[0-9]{20}$/;       
 
// data ważności karty
// miesiąc 01 &#8211; 12, oraz rok od 2003 do 2010
obiektWaznoscKarty = /^([0][1-9]|[1][1-2])/20(0[3-9]|10)$/; 
 
// PIN karty kredytowej 
// koniecznie liczba 
obiektPinKarty = /^[0-9]+$/;
 
// email 
// koniecznie format user@host 
obiektEmail = /^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/;
 
// sprawdzamy pola 
function sprawdzFormularz(Formularz)
{
 
 if(sprawdzPole(Formularz, "numer", "Numer karty kredytowej", objNumerKarty) 
&&
sprawdzPole(Formularz, "waznosc", "Data ważności ", obiektWaznoscKarty) 
&&
sprawdzPole(Formularz, "pin", "Numer PIN ", obiektPinKarty) 
&&
sprawdzPole(Formularz, "email", "Adres Email ", obiektEmail)) 
{
 return true;
} else {
  return 
false;
 }
}
// koniec ukrywania kodu
-->
</script>
</head>
 
<body>
 
<h2>Informacje o karcie kredytowej </h2>
<form name="walidiacjaDanych" onSubmit="return sprawdzFormularz(&#8216;walidiacjaDanych&#8217;);">
 
Numer karty <br>
<input name="numer" type="text">
 
<p>
 
Typ <br>
<select name="typ">
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="AmericanExpress">American Express</option>
</select>
 
<p>
 
Data ważności (mm/yyyy) <br>
<input name="waznosc" type="text">
 
<p>
 
kod PIN <br>
<input name="pin" type="text">
 
<p>
 
Adres email  <br>
<input name="email" type="text">
 
<p>
 
<input type="submit" value="Wyślij">
 
</form>
 
</body>
</html>

Zapewne zauważysz w powyższym przykładzie, że użyłem ogromnej liczby wyrażeń regularnych do sprawdzenia poprawności podanych danych. Tego rodzaju weryfikacja danych po stronie przeglądarki jest niezwykle istotna w sieci Web, aby mieć pewność, że informacje przesłane są w odpowiednim formacie.

Kategorie

Spis treści

O autorze

Podobne Artykuły

Nowe artykuły

Zrozumieć obiekt RegExp w JavaScript

Praca z formularzami