
Update 09-2014: uwaga – ten artykuł powstał oryginalnie kilka lat temu, jeszcze na starym blogu, więc może nieco odbiegać od dzisiejszych standardów dobrych i zalecanych rozwiązań.
Witam w kolejnej części praktycznych przykładów i rozwiązań problemów w JavaScript. Skupimy się głównie na zagadnieniach walidacji – implementacjach elementów walidatora.
Najlepsze rozwiązania w JavaScript po raz kolejny
A na początek przykład implementowany dawno temu, na potrzeby serwisu społecznościowego. I wcale nie jest to najbardziej osobliwy przykład (czegoż to ludzie nie wymyślą).
Poniższy kod sprawdzał, czy użytkownik wpisał poprawny tekst w polu tekstowym, a nie tylko ciąg spacji (co użytkownicy czynili „na odczepnego”).
Przykład – prosty walidator – przetwarzanie i sprawdzanie ciągów znaków:
function checkFakeString(input) { var tsize = input.length; var code = null; var idx = 0 for (idx = 0; idx < tsize; idx++) { code = parseInt(input.charCodeAt(idx)); if (code != 32) return true; } return false; }
Do funkcji przekazujemy ciąg pobrany z pola tekstowego, które chcemy sprawdzić.
Poniższy kod natomiast, przyda się do szybkiego zbadania typu pliku, który użytkownik chce nam wysłać w formularzu.
Przykład – walidacja rozszerzenia pliku w JavaScript:
function checkForValidFileExtension(elemVal) { var fp = elemVal; if (fp.indexOf('.') == -1) return false; var allowedExts = new Array("jpg", "jpeg", "pjpeg", "png"); var ext = fp.substring(fp.lastIndexOf('.') + 1). toLowerCase(); for (var i = 0; i < allowedExts.length; i++) { if (ext == allowedExts[i]) return true; } // zabronione return false; }
Przykład użycia (z biblioteką Prototype JS):
Event.observe('user_avatar','change',function() { // wartość z pola typu file - z plikiem, // który nas interesuje var avv = $("user_avatar").value; var errmsg = "Zły typ pliku!"; if (checkForValidFileExtension(avv) == true) { $("filemsg").innerHTML = ""; // odblokuj możliwość wysłania formularza $('registerSubmit').disabled = false; } else { $("filemsg").innerHTML = errmsg; // zablokuj możliwość wysłania formularza $('registerSubmit').disabled = true; } });
Walidacja adresu e-mail
Przedstawiona wersja może sprawdzić poprawność zarówno jednego, jak i wielu adresów e-mail.
Wiele adresów e-mail rozdzielone powinny być przecinkami, podane np. w polu tekstowym. Tym samym można było sprawdzić całą listę adresów e-mail.
Przykład – walidacja jednego lub wielu adresów e-mail:
// bufor na adresy, które są niepoprawne var wrong_buff = ""; function checkEmail() { var input = new Array(); var regx = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@ ([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+)*(\.[a-zA-Z]{2,4})$/i; var emails = $('pole_email').value; // pobierz adres lub wiele adresów, jeśli dane // zostały rozdzielone przecinkami input = emails.split(","); var dt = input.length; for(idx = 0; idx < dt; idx++) { var tmp = trim(input[idx]); if (tmp == "") continue; if (tmp.match(regx) == null) { wrong_buff += tmp + ","; } } if (wrong_buff.length < 0) { var lc = wrong_buff.lastIndexOf(","); wrong_buff = wrong_buff.slice(0, lc); return false; } return true; }
Walidacja daty
Układając wyrażenie regularne, możemy sprawdzić poprawność daty, tzn. czy podano ją w danym formacie.
Przykład – sprawdzanie formatu daty w JavaScript:
<p>Data: <input type="text" id="txt1" /><br /> Np.: 10/02/2007 <br /> <input type="button" value="Sprawdź" onclick="validate()" /></p>
function isValidDate(sText) { var reDate = /(?:0[1-9]|[12][0-9]|3[01])\/ (?:0[1-9]|1[0-2])\/(?:19|20\d{2})/; return reDate.test(sText); } function validate() { var oInput1 = document.getElementById("txt1"); if (isValidDate(oInput1.value)) { alert("Data poprawna"); } else { alert("Data niepoprawna!"); } }
Usuwanie znaczników HTML z tekstu
Oto prosty, ale kompletny przykład na usuwanie znaczników HTML z danych tekstowych.
<p>Wpisz tekst zawierający HTML</p> <textarea rows="10" cols="50" id="txt1"></textarea> <input type="button" value="Usuń HTML" onclick="showText()" />
String.prototype.stripHTML = function () { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag, ""); }; function showText() { var oInput1 = document.getElementById("txt1"); var oInput2 = document.getElementById("txt2"); oInput2.value = oInput1.value.stripHTML(); }
Każdy, kto słyszał o XSS wie, jak ważnym zadaniem jest czyszczenie tagów (szczególnie niebezpieczne są osadzane złośliwe skrypty JavaScript) przy przetwarzaniu danych. I oczywiście można to zrobić nie tylko po stronie serwera.
Podsumowanie
Tym samym zakończyliśmy kolejną część z serii: Najlepsze rozwiązania w JavaScript. Pierwsza część była dłuższa, i pewnie też ciekawsza. Ale programowanie to niestety nie tylko robienie fajnych rzeczy. W każdym przypadku, zawsze może trafić się coś, za czym nie przepadamy.
Ja na przykład nie przepadam za walidacją, ale wiem jak ważna jest poprawność danych i bezpieczeństwo. Może w jakiejś alternatywnej rzeczywistości nie ma potrzeby implementowania żadnych walidatorów, ponieważ wszyscy podają zawsze poprawne wartości, a złośliwość nie istnieje… któż to wie 🙂
Tymczasem zachęcam do śledzenia kolejnych wpisów.