Zamislimo internetsku stranicu koja od korisnika zahtijeva unos telefonskih brojeva, jedan ili više. Ako postavimo strogu validaciju pomoću regularnih izraza, svaki put kada korisnik upiše krivi znak ili krivi format, onaj koji mi ne očekujemo, a upisani broj je ispravan, korisniku će po ekranu iskakati razna upozorenja. Stavimo se u ulogu korisnika. Ako iz dva pokušaja ne uspijemo upisati naš telefonski broj, jer ne razumijemo koji format se traži, većina nas će odustati i ostaviti polje prazno ili, u najgorem slučaju, u potpunosti napustiti stranicu. U slučaju da ne stavimo nikakvu validaciju preko regularnih izraza, korisniku omogućavamo upis bilo čega i bilo kojih formata telefonskih brojeva, što nama programerima dodatno otežava situaciju, tablica 1.
Tablica 1. Zapis telefonskog broja u SQL bazi
|
Telefon 1 |
Telefon 2 |
|
Aaaaaaaaaa |
123a |
|
123/456-789 |
123456789 |
|
123 456 789 |
+123 456 789 987 |
U tablici 1. vidljivo je nekoliko ispravnih unosa telefonskog broja, ali svi su različitog formata, što nama podatke bez dodatne obrade čini neupotrebljivima.
Puni zapis telefonskog broja za Hrvatsku je oblika:
+385 (x) xxx xxxx ili +385 (xx) xxx xxxx ili +385 (0xx) xxx xxxx (izvor telefonski imenik).
Rješenje:
1. Od korisnika zahtijevamo popunjavanje forme za unos telefonskih brojeva.
2. Korisnik je upisao sljedeće telefonske brojeve:
["1234567891", "123-456+789", "123/45-678-9", "12č34_5678", "aaaaa", "000000"];
Brzim pregledom vidljivo je da su prva tri telefonska broja ispravna, ali svaki ima svoj oblik koji ne možemo predvidjeti. Ako malo bolje pogledamo, možemo vidjeti da i četvrti broj zadovoljava minimalni broj znamenki, ali korisnik je možda slučajno upisao nedozvoljeni znak.
Rezultat koji očekujemo je [true, true, true, true, false, false].
3. Stvaramo klasu ValidacijaTelefona koja prima jedan parametar, jedan ili više telefonskih brojeva koji su pohranjeni u obliku niza. Radimo pomoću klasa jer želimo da naš kôd bude dostupan svim aplikacijama i da ga po potrebi možemo uključiti/isključiti iz projekta. Varijable unutar konstruktora dostupne su na razini cijele klase. Sve što smatramo da bi nam moglo biti korisno, npr. atributi koji su nam unaprijed poznati, dobra je praksa definirati unutar konstruktora.
export default class ValidacijaTelefona { constructor (arrayBrojevi) {
this.arrayBrojevi = arrayBrojevi;
this.prefix = "+385"; this.duzinaA = 8; this.duzinaB = 9; this.duzinaC = 10;
this.samoBrojevi = new RegExp("[0-9]", "g");
}
}
4. Stvaramo metodu koja će služiti za formatiranje podataka. Jedna klasa može sadržavati više metoda koje mogu biti dostupne svima ili samo klasi u kojoj se nalaze.
formatiraj() {
}
5. Unutar metode stvaramo varijablu u koju ćemo pohraniti naše formatirane brojeve. Reduce je metoda koja je dostupna samo nizovima. Za svaki član niza izvršava zadanu funkciju, a kao rezultat vraća novi niz koji sadrži nove formatirane vrijednosti, raspored elemenata ostaje isti.
const formatirani = this.arrayBrojevi.reduce((prev, curr) => {
}, []); return formatirani;
6. Prva stvar koju je potrebno napraviti unutar reduce metode je provjeriti što je korisnik upisao. Telefonski broj treba sadržavati samo brojeve pa tako odbacujemo sve što nisu brojevi i vraćamo novi niz vrijednosti koji je za slučaj „123-456+789“ jednak ["123", "456", "789"]. Unutar regularnog izraza potrebno je postaviti globalnu (g) zastavicu kako bi pregledali cijeli izraz. Ako rezultat regularnog izraza nije null, novonastali niz pretvaramo u string koji je pogodan za daljnju obradu.
const unos = curr.match(this.samoBrojevi); if (unos !== null) {
const broj = unos.join("").toString();
} else {
prev.push(false)
} return prev;
7. Unos korisnika je zadovoljio osnovnu provjeru, ostalo je još samo unificirati podatke. Telefonski broj može imati tri različite dužine ovisno o zapisu broja županije (1, 34, 034). Nakon provjere broja znamenki broj formatiramo pomoću regularnih izraza.
if (broj.length === this.duzinaA) { prev.push(broj.replace(/^([0-9]{1})([0-9]{3})([0-9]{4})/g, `${this.prefix} (0$1) $2 $3`));
} else if (broj.length === this.duzinaB) { prev.push(broj.replace(/^([0-9]{2})([0-9]{3})([0-9]{4})/g, `${this.prefix} (0$1) $2 $3`));
} else if (broj.length === this.duzinaC) { prev.push(broj.replace(/^([0-9]{3})([0-9]{3})([0-9]{4})/g, `${this.prefix}
($1) $2 $3`)); } else {
prev.push(false);
}
8. Ovako napisanu funkciju možemo koristiti u svim projektima pomoću:
import ValidacijaTelefona from "./ValidacijaTelefona";
Funkciju pozivamo s: new ValidacijaTelefona(niz_parametara).formatiraj().
9. Rezultat:
(6) ["+385 (123) 456 7891", "+385 (012) 345 6789", "+385 (012) 345 6789", "+385 (01) 234 5678", false, false]
- 0:"+385 (123) 456 7891"
- 1:"+385 (012) 345 6789"
- 2:"+385 (012) 345 6789"
- 3:"+385 (01) 234 5678"
- 4:false
- 5:false
- length:6
- __proto__:Array(0)
Prikazani primjer koristi novi JavaScript. Ovo nije dostupno u preglednicima starijim od 2015. godine. Da bi napisana klasa bila dostupna unutar svih preglednika, potrebno je koristiti set alata koji se baziraju na webpacku, babelu i nodeu.
Na isti način moguće je vršiti unificiranje svih unosa podataka koji dolaze od korisnika. Najčešća upotreba ovog načina unificiranja podataka je za telefonske brojeve, brojeve mobilnih uređaja, brojevi faksa, e-mail adrese, adrese kućanstva i slično.