JavaScript

Tietojen tarkistus

Eräs tärkeimmistä Javascriptin sovelluskohteista on lomakkeen tietojen tarkistus ennen niiden lähettämistä palvelimelle. Tällä tavoin voi vähentää palvelimen kuormitusta. Lisäksi käyttäjä saa nopemmain palautetta tekemistään erehdyksistä.

Kokeillaan yksinkertaista esimerkkiä, jossa lomakkeeseen syötetään uuden käyttäjän tiedot johonkin verkkopalveluun.

Jos tiedot on talletettu oikein, ne lähetetään samalle sivulle get-metodilla, joten niitä voi tutkia selaimessa näkyvässä URLissa. Esimerkiksi

http://.../tarkistus.html?nimi=Lerkko+Japoniemi&tunnus=lejari&sala1=Yksi2345&sala2=Yksi2345

Lomakkeen HTML-koodi on

<form name="tiedot" action="tarkistus.html" method="get" onSubmit="return tarkista()">
<table>
<tr><td>Nimi:</td><td><input type="text" name="nimi" /></td></tr>
<tr><td>Tunnus:</td><td><input type="text" name="tunnus" /></td></tr>
<tr><td>Salasana:</td><td><input type="password" name="sala1" /></td></tr>
<tr><td>Salasanan vahvistus:</td><td><input type="password" name="sala2" /></td></tr>
<tr><td></td><td><input type="submit" value="Liity palveluun" /></td></tr>
</table>
</form>

Huomaa, että lomakkeen lähetyksen käsittelijä (onSubmit) tulkitaan totuusarvoksi, jos siihen laitettu lauseke on arvoltaan true, lomakkeen tiedot lähetetään. Tapahtumankäsittelijässä kutsuttava funktio tarkista() on

<script type="text/javascript">
  function tarkista() {
    with (document.tiedot) {
      // tarkistetaan ensin nimi
      var re = /^[\wäöüåéè]+ [\wäöüåéè][\w äöüåéè]*$/i;
      var nm = nimi.value;
      if (!re.test(nm)) {
        alert("Nimessä pitää olla etunimi ja sukunimi ilman erikoismerkkejä!");
        nimi.select();
        nimi.focus();
        return false;
      }

      // tarkistetaan käyttäjätunnus
      re = /^\w{6}\w*$/;
      var tu = tunnus.value;
      if (!re.test(tu)) {
        alert("Käyttäjätunnuksessa saa olla kirjaimia a-z ja numeroita!\nTunnus on oltava vähintään 6 merkkiä pitkä!");
        tunnus.select();
        tunnus.focus();
        return false;
      }

      // tarkistetaan, että salasanat ovat samat
      s1 = sala1.value;
      s2 = sala2.value;
      if (s1 != s2) {
        alert("Salasanan vahvistus epäonnistui!");
        sala1.value = "";
        sala2.value = "";
        sala1.focus();
        return false;
      }

      // tarkistetaan, että salasana on tarpeeksi monimutkainen
      if (!/[0-9]/.test(s1) || !/[a-z]/.test(s1) || !/[A-Z]/.test(s1) || s1.length < 8) {
        alert("Salasana on liian yksinkertainen!\nTarvitaan ainakin yksi pieni kirjain a-z, iso kirjain A-Z ja numero 0-9.");
        sala1.value = "";
        sala2.value = "";
        sala1.focus();
        return false;
      }
    }
    return true;
  }
</script>

Tekstimuotoisen tiedon tarkistuksessa on helpointa käyttää regex-lauseita, varsinkin monimutkaisissa tapauksissa. Edellä käytettiin seuraavia:

/^[\wäöüåéè]+ [\wäöüåéè][\w äöüåéè]*$/i