Najlepsze rozwiązania w JavaScript cz. 2.

javascript-html5-tutorial.pl

29 sierpnia, 2013

Dominik-W

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.