Razred Form

JavaScript ima dostop do opisov vseh obrazcev, ki so vključeni v dokument HTML. Opisi obrazcev so zbrani v seznamu document.forms. Vsak element tega seznama je objekt razreda Form, ki opisuje en obrazec. Lastnosti tega objekta so name, method, target , enctype, action, acceptCharset, length, id, className, dir, lang, title in encoding, ki imajo enake pomene kot istoimenske lastnosti značke <form>, s katero obrazec vključimo v HTML (izjema je lastnost encoding, ki pa ustreza lastnosti enctype značke form). Lastnost length pove, koliko elementov je vsebovanih v obrazcu, opisi teh elementov pa so zbrani v tabeli elements.

Poleg omenjenih lastnosti ima vsak objekt razreda Form še metodi reset() in submit(), ki simulirata pritisk na ustrezna gumba v obrazcu.

Elementi obrazca so lahko različnih vrst. Vsak element je objekt, ki pripada enemu od razredov Text, Textarea, Password, Hidden, Radio, Checkbox, Select, FileUpload, Button, Reset ali Submit.

Poimenovanje obrazcev

Obrazce in njegove elemente je priporočljivo poimenovati, saj si tako zelo olajšamo dostop do ustreznih objektov. Če imamo v obrazcu z imenom obrazec vnosno polje z imenom polje, lahko do ustreznega objekta pridemo na naslednje načine:

document.forms["obrazec"].elements["polje"]

document.forms["obrazec"].polje

document.obrazec.elements["polje"]

document.obrazec.polje

Seveda bomo v večini primerov uporabili zadnji (najkrajši) način, ostale pa samo v primerih, če je ime obrazca ali elementa zapisano v kakšni spremenljivki ali pa če ga dobimo kot vrednost nekega izraza. Če vemo, v kakšnem vrstnem redu so zloženi obrazci in elementi v njih, lahko uporabimo tudi dostop z indeksi, na primer:

document.forms[0].elements[1]

Če je v obrazcu več elementov z enakim imenom, so shranjeni v tabeli. Primer: če imamo skupino radijskih gumbov (vsi so enako poimenovani, recimo skupina), pridemo do i-tega gumba takole:

document.obrazec.skupina[i]

Podrazred text

Objekt tega razreda predstavlja enovrstično vnosno polje v obrazcu, ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "text").

name Ime elementa.

defaultValue Začetna vrednost elementa.

value Trenutna vrednost elementa.

Metode

focus() Aktivira element.

blur() Deaktivira element.

select() Označi vsebino elementa.

Podrazred textarea

Objekt tega razreda predstavlja večvrstično vnosno polje v obrazcu, ki ga ustvarimo z značko:

<textarea name="ime">vrednost</textarea>

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "textarea").

name Ime elementa.

defaultValue Začetna vrednost elementa.

value Trenutna vrednost elementa.

Metode

focus() Aktivira element.

blur() Deaktivira element.

select() Označi vsebino elementa.

Podrazred password

Objekt tega razreda predstavlja vnosno polje za vnos gesla, ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "password").

name Ime elementa.

defaultValue Začetna vrednost elementa.

value Trenutna vrednost elementa.

Metode

focus() Aktivira element.

blur() Deaktivira element.

select() Označi vsebino elementa.

Podrazred hidden

Objekt tega razreda predstavlja skrito polje v obrazcu, ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "hidden").

name Ime elementa.

value Trenutna vrednost elementa.

Podrazred radio

Objekt tega razreda predstavlja enega v skupini radijskih gumbov (v isti skupini so gumbi z enakim imenom), ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "radio").

name Ime elementa.

value Vrednost elementa.

defaultChecked Logična vrednost, ki pove, ali je gumb na začetku pritisnjen.

checked Logična vrednost, ki pove, ali je gumb trenutno pritisnjen.

Metode

focus() Aktivira element.

blur() Deaktivira element.

click() Simulira pritisk na radijski gumb.

Podrazred select

Objekt tega razreda predstavlja izbirno polje, v katerem lahko izberemo eno ali več od danih možnosti. Tako polje vključimo v HTML na enega od naslednjih dveh načinov:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "select-one" ali "select-multiple").

name Ime elementa.

length Število izbir v seznamu.

options Tabela izbir v seznamu.

selectedIndex Indeks prve označene možnosti v seznamu. Indeks prve možnosti je vedno 0. Če ni označena nobena možnost, je ta vrednost enaka -1. Če lahko izberemo več možnosti, moramo pregledati vsako opcijo posebej, da vidimo, katere so označene.

Metode

focus() Aktivira element.

blur() Deaktivira element.

Podrazred option

Objekt tega razreda predstavlja eno izbiro v izbirnem polju, v katerem lahko izberemo eno ali več od danih možnosti. V HTML izbiro definiramo z značko option:

...

</select>

Lastnosti

value Vrednost izbire (ustreza lastnosti value značke option).

text Opis izbire.

selected Logična vrednost, ki pove, ali je izbira trenutno označena.

defaultSelected Logična vrednost, ki pove, ali je bila izbira na začetku označena.

Primer: spreminjanje velikosti menija

<html>

<head>

function spremeniVelikost()

{ document.getElementById("meni").size=4; }

</script>

</head>

<body>

<form>

<option>Jabolko</option>

<option>Banana</option>

<option>Oranza</option>

<option>Melona</option>

</select>

</form>

</body>

</html>

Primer: odstrani izbrano opcijo

<html>

<head>

function odstraniOpcijo()

{

var x=document.getElementById("opcije")

x.remove(x.selectedIndex)

}

</script>

</head>

<body>

<form>

<option>Jabolka</option>

<option>Grozdje</option>

<option>Banane</option>

<option>Oranze</option>

</select>

</form>

</body>

</html>

Podrazred filupload

Objekt tega razreda predstavlja polje za vnos imena datoteke, ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "file").

name Ime elementa.

value Trenutna vrednost elementa (ime datoteke).

Metode

focus() Aktivira element.

blur() Deaktivira element.

select() Označi vsebino elementa.

Podrazred reset

Objekt tega razreda predstavlja gumb, s katerim vsem poljem v obrazcu predpišemo začetne vrednosti. Tak gumb ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "reset").

name Ime elementa.

value Trenutna vrednost elementa (besedilo na gumbu).

Metode

focus() Aktivira element.

blur() Deaktivira element.

click() Simulira klik na gumb

Podrazred submit

Objekt tega razreda predstavlja gumb, s katerim zaključimo vnos podatkov v obrazec. Tak gumb ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "submit").

name Ime elementa.

value Trenutna vrednost elementa (besedilo na gumbu).

Metode

focus() Aktivira element.

blur() Deaktivira element.

click() Simulira klik na gumb.

Podrazred button

Objekt tega razreda predstavlja navaden gumb, ki ga ustvarimo z značko:

Lastnosti

form Obrazec, ki vsebuje ta element.

type Tip elementa (vedno "button").

name Ime elementa.

value Trenutna vrednost elementa (besedilo na gumbu).

Metode

focus() Aktivira element.

blur() Deaktivira element.

click() Simulira klik na gumb.

Razred Button

Objekt razreda Button predstavlja navaden gumb, ki ga ustvarimo z značko:

Lastnosti tega razreda so accessKey, disabled, form, id, name, tabIndex, type, value, className, dir, lang in title.

Primer kopije vnosa podatkov v drugem obrazcu

<html>

<head>

function enako()

{

for (i=0; i<document.obrazec1.lastnost.length; i++)

{ document.obrazec2.lastnost[i].value=document.obrazec1.lastnost[i].value;

}

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>Priimek: </td>

</tr>

<tr>

<td>Naslov: </td>

</tr>

<tr>

<td>E-pošta </td>

</tr>

</table>

</form>

<table>

<tr>

</tr>

<tr>

<td>Priimek: </td>

</tr>

<tr>

<td>Naslov: </td>

</tr>

<tr>

<td>E-pošta: </td>

</tr>

</table>

</form>

</body>

</html>

Primer: izračunaj izraz, vrni rezultat in tip rezultata

<html>

<body>

function izracunaj(obrazec)

{

var vrednost = eval(obrazec.izraz.value);

obrazec.tip.value = typeof vrednost;

obrazec.rezultat.value = vrednost;

} </script>

<table>

<tr><td>Vpiši izraz: </td><td><input type="text" name="izraz" /> </td></tr>

<tr><td>Izhodni tip izraza: </td><td><input type="text" name="tip" /></td></tr>

<tr><td>Rezultat izraèuna izraza: </td><td><input type="text" name="rezultat" /></td></tr>

</table>

</form>

</body>

</html>

Preverjanje vsebine podatkov v obrazcih

Uporabniki se velikokrat zmotijo, ko vnašajo podatke v obrazce (namesto cifre vnesejo črko, številka ni v pravih mejah, ne izberejo nobene opcije, uporabnik želi na strežnik poslati kodo s pomočjo katere bi rad vdrl na na strežnik ali v upravljalca podatkovne baze...). Če hočemo, da bo strežnik ustrezno obdelal vsebino obrazcev, jo moramo preveriti že na odjemalčevi strani. Svetujem vam pa dajo preverite še tudi na strežniški strani, saj imajo nekateri uporabniki izključen Javascript. Če uporabnik vnese napačne podatke, ga je potrebno opozoriti.

...

</form>

Če želimo v Javascriptu preveriti pravilnost obrazca moramo znački form v obrazcu dokumenta HTML predpisati lastnost onsubmit, ki določa, kaj se naj zgodi, ko uporabnik v obrazcu pritisne gumb tipa submit. Običajno preverimo, ali imajo vsa obvezna polja vpisan podatek, včasih pa tudi, ali je ta podatek pravega tipa ali dolžine (če pričakujemo število, mora uporabnik res vpisati število). Ukaz, ki ga predpišemo kot vrednost lastnosti onsubmit mora vrniti logično vrednost. Če vrne vrednost false, pomeni da je med podatki napaka, zato bo brskalnik počakal da jih uporabnik popravi. Vrednost true pa pomeni, da je s podatki vse v redu, zato brskalnik nadaljuje s prikazom strani, ki jo določimo z lastnostjo action značke form.

n Ukaz, ki ga predpišemo lastnosti onsubmit, je običajno stavek return, ki vrne vrednost, ki jo dobi kot rezultat neke funkcije. Ta funkcija običajno za parameter dobi obrazec, ki ga mora preveriti, vrne pa logično vrednost, odvisno od tega, ali je s podatki vse v redu. Če damo obrazec za parameter, nam ga ni treba poimenovati.

Preverjanje tekstovnih polj

Najpreprosteje je preveriti polja tipov text, password, file in polje textarea. Vsa ta polja imajo lastnost value. Če polje pustimo prazno, bo vrednost te lastnosti prazen niz. Poglejmo preprost obrazec:

<table>

<tr>

</tr>

<tr>

<td><b>Geslo:</b></td><td><input type="password" name="geslo" /></td>

</tr>

<tr>

</tr>

<tr>

<td><b>Datoteka:</b></td><td><input type="file" name="datoteka" /></td>

</tr>

<tr>

</tr>

</table>

</form>

function preveri1(obr)

{

if (obr.ime.value == "") {

alert("Vpišite ime!")

return false

}

if (obr.geslo.value == "") {

alert("Vpišite geslo!")

return false

}

if (obr.opis.value == "") {

alert("Vpišite opis!")

return false

}

if (obr.datoteka.value == "") {

alert("Vpišite ime datoteke!")

return false

}

return true

}

Funkcija preveri1 je sestavljena iz zaporednih pogojnih stavkov, kjer preverimo vsako polje posebej. Če je vrednost polja prazen niz, opozorimo uporabnika in končamo funkcijo z rezultatom false. Če obrazec preživi vse teste, pa na koncu funkcije vrnemo true.

Preverjanje izbirnih polj

S preverjanjem izbirnih polj select ni veliko dela. Lastnost selectedIndex nam pove indeks prve izbrane možnosti iz seznama. Možnosti so oštevilčene od 0 naprej. Če ni nič izbranega (to je možno samo pri večkratnih izbirah), ima selectedIndex negativno vrednost.

Primer dveh izbirnih polj

<table>

<tr>

<td><b>Mesec:</b></td>

<td>

<option value="jan">januar</option>

<option value="feb">februar</option>

<option value="mar">marec</option>

<option value="apr">april</option>

<option value="jun">junij</option>

<option value="jul">julij</option>

<option value="avg">avgust</option>

<option value="sep">september</option>

<option value="okt">oktober</option>

<option value="nov">november</option>

<option value="dec">december</option>

</select>

</td>

</tr>

<tr>

<td valign="top"><b>Jezik:</b></td>

<td>

<option value="slo">slovenski</option>

<option value="ang">angleški</option>

<option value="nem">nemški</option>

<option value="fra">francoski</option>

<option value="spa">španski</option>

</select>

</td>

</tr>

<tr>

</tr>

</table>

</form>

Preverjanje izbirnih polj

function preveri2(obr)

{

if (obr.mesec.selectedIndex <= 0) {

alert("Izberite mesec!")

return false

}

if (obr.jezik.selectedIndex < 0) {

alert("Izberite jezik!")

return false

}

return true

}

V polju mesec imamo 13 možnosti (prva je prazna). Uporabnik je izbral eno izmed nepraznih možnosti, če ima selectedIndex vrednost strogo večjo od 0. Pri izbiri jezika pa nimamo prazne možnosti, obstaja pa možnost, da uporabnik ne izbere ničesar. V tem primeru bo imel selectedIndex negativno vrednost.

Preverjanje vnosa v obrazcih, ki vsebujejo polja tipa checkbox

Če imamo samo eno polje tipa checkbox z danim imenom, pravzaprav nimamo kaj preverjati, saj je polje namenjeno temu, da je lahko tudi prazno. Zaplete se, če imamo skupino takih polj (ali skupino polj tipa radio). Znotraj skupine so polja enako poimenovana.

Primer obrazca

<table>

<tr>

<td valign="top"><b>Ocena:</b></td>

<td>

<input type="radio" name="ocena" value="1" /> nezadostno<br />

<input type="radio" name="ocena" value="2" /> zadostno<br />

<input type="radio" name="ocena" value="3" /> dobro<br />

<input type="radio" name="ocena" value="4" /> prav dobro<br />

<input type="radio" name="ocena" value="5" /> odlicno

</td>

</tr>

<tr>

<td valign="top"><b>Teèaj :</b></td>

<td>

<input type="checkbox" name="tecaj" value="JS" /> JavaScript<br />

<input type="checkbox" name="tecaj" value="LaTeX" /> LaTeX<br />

<input type="checkbox" name="tecaj" value="Office" /> MS Office<br />

<input type="checkbox" name="tecaj" value="Delphi" /> Delphi

</td>

</tr>

<tr>

</tr>

</table>

</form>

Preverjanje obrazca

function preveri3(obr)

{

var i = 0

while (i < obr.ocena.length && !obr.ocena[i].checked) ++i

if (i == obr.ocena.length) {

alert("Izberite oceno!")

return false

}

var stevilo = 0

for (i = 0; i < obr.tecaj.length; ++i)

if (obr.tecaj[i].checked) ++stevilo

if (stevilo == 0) {

alert("Izberite tecaj!")

return false

}

if (stevilo > 2) {

alert("Izberete lahko najvec dva tecaja!")

return false

}

return true

}

Polja znotraj iste skupine so v JavaScriptu predstavljena s tabelo. Če želimo preveriti, ali je kakšno polje izbrano, moramo z zanko po vrsti pregledovati polja v tabeli tako dolgo, da pridemo do konca tabele ali pa najdemo označeno polje. Če pa želimo prešteti, koliko polj je izbranih, pa moramo pregledati celo tabelo.

Brisanje vsebine iz obrazca

V obrazcu lahko imamo tudi gumb tipa reset, ki vrednosti vseh polj v obrazcu nastavi na začetne vrednosti. Preden to naredi, pa lahko izvršimo ukaz v JavaScriptu, ki odloči, ali je to res treba narediti. Podobno kot prej, lahko obrazcu v HTML datoteki dodamo lastnost onreset. Njena vrednost je ukaz, ki se izvrši, ko v obrazcu kliknemo na gumb tipa reset. Vrniti mora logično vrednost. Če vrne true, bo program nastavil vrednosti polj na začetne vrednosti, če vrne false, pa program ne bo naredil ničesar.

Primer:

<table>

<tr>

</tr>

<tr>

<td><b>Priimek:</b></td>

</tr>

<tr>

</tr>

</table>

</form>

Primer: preverjanje obrazca, kjer vpisujemo priimek, starost in e-naslov

<table>

<tr>

<td>Priimek (vnesete lahko najveè 20 znakov): </td>

</tr>

<tr>

<td>Starost (vnesete lahko vrednosti med 0 in 110): </td>

</tr>

<tr>

<td>E-pošta (Vnesite pravilen naslov e-pošte): </td>

</tr>

<tr>

</tr>

</table>

</form>

//funkcija vrne true, èe so priimek, starost in e-pošta pravilno vnešeni

function preveri()

{

var afna=document.getElementById("e-posta").value.indexOf("@");

var starost=document.getElementById("starost").value;

var priimek=document.getElementById("priimek").value;

var lahkoPosljes="true";

if (priimek.length>20) // preverjanje priimka

{

alert("Priimek mora biti krajši kot 20 znakov!");

lahkoPosljes="false";

}

if (isNaN(starost)||starost<0||starost>110) // preverjanje starosti

{

alert("Starost mora biti med 0 in 110 let!");

lahkoPosljes="false";

}

if (afna==-1) // preverjanje, èe v e-posti obstaja znak @

{

alert("Elektronska pošta ni pravilna!");

lahkoPosljes="false";

}

if (lahkoPosljes=="false")

return false; // funkcija vrne false, èe so vnešeni podatki napaèno vnešeni

else

return true; //funkcija vrne ftrue, èe so vnešeni podatki pravilno vnešeni

}

Uporaba regularnih izrazov za preverjanje podatkov v obrazcih

Z regularnimi izrazi opisujemo vzorce, ki omogočajo obelovanje podatkov v tekstovni obliki (npr. iskanje po nizih znakov ali ugotavljanje pravilnosti nizov znakov). Na primer, regularni izraz:

(a|b)*ccc

opisuje nize, ki se začnejo s poljubnim številom a-jev in b-jev in se končajo s tremi c-ji. To razberemo takole: znak | loči alternative, zato a|b preberemo "a ali b"; znak * pomeni nič ali več ponovitev izraza, ki je pred znakom, torej (a|b)* preberemo "poljubno število ponovitev: a ali b." Celoten izraz torej pomeni "poljubno število ponovitev a-jev in b-jev, nato pa sledijo še trije c-ji". Primeri nizov, ki ustrezajo tej zahtevi so

ccc
accc
ababaaccc
bbbbaccc

medtem, ko naslednjih nizov zgornji regularni izraz ne opisuje:

cccccc
Milan
cccaababa

Regularne izraze bomo uporabili za preverjanje pravilnosti podatkov pri vnosih. V Javascriptu za ta namen uporabljamo objekte razreda RegExp. Bogat nabor že narejenih in preizkušenih regularnih izrazov najdete na http://www.regexlib.com/

Definicija regularnega izraza

Regularni izraz lahko definiramo na naslednja načina:

var vzorec = new RegExp("regularni izraz");

var vzorec = new RegExp("regularni izraz", "dodatni parametri regularnega izraza");

Primera:

var vzorec = new RegExp("oj|mb");

var vzorec = new RegExp("[a-z] ",”gi”);

ali

var vzorec1 = /regularni izraz/;

var vzorec1 = /regularni izraz/dodatni parametri regularnega izraza;

Primera:

var vzorec1 = /\W+/;

var vzorec1 = /milan/i;

Regularni izraz uporabimo na naslednje načine:

rezultat = vzorec1.exec(niz); - pri klicu metod za delo z regularnimi izrazi (test, compile in exec)

ali

niz.match(vzorec1); - pri klicu metod za delo z nizi znakov (search, match, replace in split).

Seznam regularnih izrazov

. Namesto znaka “.” lahko v vzorcu nastopa katerikoli znak razen \n. Za primer vzorca a.c dobimo pravilen rezultat, če testiramo nize abc, aac, acc, adc, aec, ...

^ Najde podniz, le če je na začetku testiranega niza. Posebne vsebine (prazna mesta in na znake povezani okvirji) na začetkih odstavkov bodo izpuščene. Za primer vzorca ^abc dobimo pravilen rezultat, če testiramo nize abc, abcdefg, abc123, ...

$ Najde podniz le, če se nahaja na koncu testiranega niza. Posebne vsebine (prazna mesta in na znake povezani okvirji) na koncih odstavkov bodo izpuščene. Za primer vzorca abc$ dobimo pravilen rezultat, če testiramo nize abc, endsinabc, 123abc, ...

* Niz pred zvezdico se lahko v testiranem nizu ponovi 0 ali poljubnokrat. Za primer vzorca ab*ca dobimo pravilen rezultat, če testiramo nize ac, abc, abbc, abbbc, ...

+ Niz pred tem simbolom se mora pojaviti najmanj enkrat ali večkrat. Za primer vzorca ab+c dobimo pravilen rezultat, če testiramo nize abc, abbc, abbbc, ...

| Alternativa niz | niz1 (niz ali niz1). Za primer vzorca milan|tadej dobimo pravilen rezultat, če testiramo niza milan, tadej.

{x} Z zavitim oklepajem definiramo število ponovitev. Za primer vzorca ab{2}c dobimo pravilen rezultat, če testiramo niz abbc. Pomembni so še {x,y} (število ponavljanj regularnega izraza med x in y) in {x,} ( število ponavljanj regularnega izraza x ali večkrat.

? Znak, ki stoji pred znakom ? Se lahko pojavi največ enkrat. Za primer vzorca ab?c dobimo pravilen rezultat, če testiramo niza ac in abc.

[...] V nizu morajo biti samo znaki iz množice v oglatem oklepaju. Za primer vzorca a[bB]c dobimo pravilen rezultat, če testiramo niza abc, aBc . Najbolj pogosto uporabljamo vzorca za testiranje črkovnih nizov ( izraz [A-Za-z] ) in testiranje števk (izraz [0-9] ). Uporablja se tudi vzorec [^xyz] (najde vse znake, ki niso zapisani za znakom ^).

(...) Povezovanje regularnih izrazov v skupino. Za primer vzorca (abc){2} dobimo pravilen rezultat, če testiramo niz abcabc ( niz abc, se mora ponoviti natanko dvakrat).

\C Poišče natanko ta znak (brez številk), v tem primeru C (če želimo najti dolarske znake, potem vnesemo izraz: \$. Posamezni znaki, ki jih pogosto uporabljamo so \n (trdi prelom), \t (tabulator), \w ( alfanumerični znak), \W (nealfanumerični znak), \xxx (ASCII znak predstavljen z osmiškimi števili), \xdd (ASCII znak predstavljen s šestnjastiškim številom), \uxxxx (znak iz nabora Unicode), \d (števka), \D (neštevka).

i Ignorira velikost črk (črke so lahko velike ali male).

g Išče po celem nizu (vse pojavitve podnizov, ki ustrezajo regularnemu izrazu).

m Išče po nizih, ki so sestavljeni iz več vrstic (vse pojavitve podnizov, ki ustrezajo regularnemu izrazu).

\b Vrne rezultat, če se podniz začne na začetku ali konča na koncu besede.

\B Vrne rezultat, če se podniz ne začne na začetku in ne konča na koncu besede. Če imamo niz "Visit W3Schools“ in vzorec /\Bis/, dobimo rezultat Visit W3Schools.

?= Vrne rezultat, če podniz, ki nastopa za znakom ?= nastopa v iskalnem nizu skupaj s podnizom, ki nastopa pred tem znakom. V iskalnem nizu morata biti torej oba podniza, ki nastopata pred in za znakom ?=.

?! Vrne rezultat, če podniz, ki nastopa za znakom ?! ne nastopa v iskalnem nizu skupaj s podnizom, ki nastopa pred tem znakom. V iskalnem nizu ne smeta sočasno natopati oba podniza, ki nastopata pred in za znakom ?!.

Primeri regularnih izrazov

[abc] Znak a, b ali c.

[^abc] Katerikoli znak razen znakov a, b in c.

[a-z] Znaki med znakoma a in z.

0|([1-9][0-9]*) Niz 0 ter vsi nizi števk, ki se ne začnejo z ničlo.

[A-Z][a-z]* Besede, ki se začnejo z veliko začetnico in so sestavljene iz samih črk angleške abecede.

[A-Da-z]* Nizi, ki sestojijo iz črk A, B, C in D in malih črk, na primer aaaBDBlksadzzojC.

^$ Išče prazne odstavke.

[^a-s] Najde vse znake, razen tiste med a in s.

Metode razreda RegExp

compile S to funkcijo spremenimo regularni izraz, ki ga želimo za primerjavo.

exec Iz pregledovanega niza znakov vrne niz znakov, ki ustreza regulanemu izrazu.

test Vrne true, če niz znakov ustreza regularnemu izrazu, ali false, če niz znakov ne ustreza regularnemu izrazu.

Metode razreda String, ki omogočajo uporabo regularnih izrazov:

s earch poišče podniz v iskanem nizu. Rezultat je začetni indeks podniza v nizu ali -1, če podniza ni v nizu.

match poišče podnize, ki ustrezajo regularnemu izrazu v iskanem nizu. Rezultat je polje ustreznih podnizov (objekt razreda Array).

replace zamenja znake ali podnize, ki ustrezajo regularnemu izrazu znotraj niza z drugimi znaki ali podnizi.

split(ločilo, omejitev) Niz str razbije na podnize glede na dano ločilo, ki je lahko niz poljubne dolžine ali pa regularen izraz. Dobljene podnize vrne v tabeli (objekt razreda Array). Če je ločilo prazen niz, metoda niz str razbije na posamezne znake. Če je niz str prazen, je rezultat odvisen od ločila. Če je tudi ločilo prazno vrne tabelo, ki vsebuje prazen niz, sicer pa prazno tabelo. Če podamo omejitev, bo metoda v tabelo zapisala samo prvih toliko podnizov.

Primer uporabe metod razreda RegEx

<html>

<head>

//Kako deluje funkcija test

var niz = "ojstersek@uni-mb.si";

var vzorec = new RegExp("ojstersek");

var rezultat = vzorec.test(niz);

document.write("Rezultat funkcije test: " + rezultat + "<br />");

//Kako deluje funkcija compile

var vzorec1 = new RegExp("milan");

rezultat = vzorec1.test(niz);

document.write("Rezultat funkcije test pred uporabo funkcije compile: " + rezultat + "<br />");

vzorec1.compile("uni");

rezultat = vzorec1.test(niz);

document.write("Rezultat funkcije test po uporabi funkcije compile: " + rezultat + "<br />");

//Kako deluje funkcija exec

rezultat = vzorec1.exec(niz);

document.write("Rezultat funkcije exec " + rezultat + "<br />");

//Kako deluje funkcija match

var vzorec2 = new RegExp("oj|mb");

rezultat = niz.match(vzorec2)

document.write("Rezultat funkcije match " + rezultat + "<br />");

//Kako deluje funkcija replace

rezultat = niz.replace(vzorec2, "milan.oj");

document.write("Rezultat funkcije replace " + rezultat + "<br />");

//Kako deluje funkcija split

niz = "Milan Tadej Gregor";

var vzorec3 = /\W+/;

rezultat = niz.split(vzorec3);

document.write("Rezultat funkcije split je: " + rezultat + "<br />");

//Kako deluje funkcija search

var vzorec4 = /Tadej/;

rezultat= niz.search(vzorec4);

document.write("Pozicija zaèetka niza Tadej je:" + rezultat + "<br />");

</script>

</head>

<body>

</body>

</html>

Funkcija preveri(), izvedena s pomočjo regularnih izrazov

//funkcija vrne true, èe so priimek, starost in e-pošta pravilno vnešeni

function preveri()

{

var eposta_vzorec=new RegExp (".+@.+\\.[a-z]+");

var crke_vzorec =new RegExp("^[a-zA-ZšŠcCcCžŽdÐ]+$");

var e_posta=document.getElementById("e-posta");

var starost=document.getElementById("starost").value;

var priimek=document.getElementById("priimek").value;

var lahkoPosljes="true";

if ((priimek.length>20)||(!crke_vzorec.test(priimek))) // preverjanje priimka

{

alert("Priimek mora biti krajši kot 20 znakov! in mora biti sestavljen iz samih èrk");

lahkoPosljes="false";

}

if (isNaN(starost)||starost<0||starost>110) // preverjanje starosti

{

alert("Starost mora biti med 0 in 110 let!");

lahkoPosljes="false";

}

if (!eposta_vzorec.test(e_posta.value)) // preverjanje, èe je e-poštni naslov v pravilnem formatu

{

alert("Elektronska pošta ni pravilna!");

lahkoPosljes="false";

}

if (lahkoPosljes=="false")

return false; // funkcija vrne false, èe so vnešeni podatki napaèno vnešeni

else

return true; //funkcija vrne true, èe so vnešeni podatki pravilno vnešeni

}