E10 – The Choice

E10 – The Choice
Dagens agenda
• Formulär
- Skicka
- Komma åt formulärkontroller
• Reguljära uttryck
• Validering av formulär
Validering
Postnummer:
391 62
E-postadress:
ellen@nu
Personnummer:
841211-1389
Skicka
Formulär, skicka
Metoder
submit()
Skickar formuläret.
reset()
Motsvarar om användaren klickar på en reset-knapp i
formuläret.
Event
onsubmit
Inträffar precis innan formuläret skickas. Returneras false
skickas inte formuläret. (Utmärkt vid validering)
onreset
Inträffar precis innan formuläret återställs.
var form = document.getElementById("myForm");
form.onsubmit = function(e){
// Gör validering av datat som ska skickas.
if(!ok){ return false; }
}
Komma åt formulärkontroller
För att komma åt formulärkontrollerna inom vårt formulär kan vi
använda egenskapen elements:
var form = document.getElementById("myForm");
// Ger oss den första formulärkontrollen
var k1 = form.elements[0];
//Hämta kontrollen med name="firstName"
var fn = form.elements["firstName"];
// Antalet kontroller i formuläret:
var fn = form.elements.length;
Elements returnerar en lista med noder i de fall då flera kontroller
delar samma namn som ofta är fallet med radioknappar.
Formulärelement
Metoder och egenskaper som
samtliga formulärkontroller
delar:
Metod/Egenskap
form
Ger oss det formulär i vilket kontrollen ligger. (Read only)
name
Elementets namn
type
Elementets typ (checkbox, text....)
disabled
Elementet är avaktiverat. Syns men kan inte användas. (true/false)
value
Det värde som kommer att skickas från kontrollen.
readOnly
Enbart läsbart? (true/false)
tabIndex
Tabbordningen för detta element
focus()
Ger kontrollen fokus
blur()
Fråntar kontrollen fokus
Formulärkontroller, händelser
Formulärkontroller har ett
antal händelser som kan
inträffa:
Händelse
blur
Inträffar då kontrollen tappar fokus.
focus
Inträffar då kontrollen får fokus
change
Inträffar då textfält tappar fokus och värdet har ändrats eller
när select-kontroller får ändrat värde. (behöver inte tappa fokus)
form.elements["firstName"].onfocus = function(){
this.select();
}
Textfält
Textfält, textareor,
password och hidden
<input type="text" />
<textarea></textarea>
<input type="hidden" />
<input type="password" />
Metod/Egenskap
value
Värdet på kontrollen
defaultValue
Det värde (value) kontrollen hade när denna först laddades.
select()
Markerar texten i textfältet
myTextField.select(); // Markerar texten
Kryssrutor och radioknappar
<input type="checkbox" name="drug" />
<input type="checkbox" name="drug" />
<input type="checkbox" name="drug" />
<input type="radio" name="drug" />
<input type="radio" name="drug" />
<input type="radio" name="drug" />
Metod/Egenskap
checked
True/false om kryssrutan är ikryssad
defaultChecked
True/false om kryssrutan var ikryssad som default
value
Ger värdet av checkboxen/radioknappen
myCheckbox.checked = true; // Kryssar i checkboxen
Select-rutor
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Metod/Egenskaper
selectedIndex
Den option som är vald
value
Det värde som den valda option-taggen har
options[]
De options som finns att välja på.
onchange
Event som utlöser när en ny option väljs
// Skapa en ny Option
extraOption = new Option(text, value, defaultSelected, selected);
// Lägg till den sist
selectBox.options[selectBox.length] = extraOption;
Option Metod/Egenskaper
defaultSelected
True/False. Förvalt alternativ? (selected="selected")
selected
True/false. Vald?
text
Dess text
value
Värdet
Knappar
<input type="send" />
<input type="reset" />
<input type="button" />
Metod/Egenskap
value
Värdet av knappen tillika texten som står på knappen
Smidigt kan vara att avaktivera knappen då formuläret skickas så att
användaren inte råkar klicka flera gånger.
mySendButton.disabled = true;
mySendButton.value = "Skickar...";
Reguljära uttryck
Reguljära uttryck används för att söka efter och ändra mönster i text.
Vanliga användningsområden:
• Validera data
• Ändra text i en sträng
Ett reguljärt uttryck är en uppsättning av tecken som vi kan testa mot en textsträng för
att se om textsträngen uppfyller de krav som vårt reguljära uttryck definierar.
Ett exempel på ett reguljärt uttryck:
^(19|20)[0-9][0-9]-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$
Ovanstående uttryck kan användas för att testa om en textsträng med ett datum är
angiven på formen:
ÅÅÅÅ-MM-DD
Vi ska nu lära oss att skriva reguljära uttryck som testar strängar likt strängen ovan.
Reguljära uttryck
Reguljära uttryck skrivs på formen:
"Siffrorna 0-9 ska matchas 3 gånger, därefter ska ett "-" förekomma minst en gång
följt av exakt en punkt."
Hur skrivs då detta i kod?
Först av allt måste vi lära oss skapa reguljära uttryck. Ett reguljärt uttryck är precis som
en Sträng, ett objekt. Dessa objekt (RegExp) kan skapas på två olika sätt:
var myRegExp = /UTTRYCK HÄR/;
var myRegExp = new RegExp("UTTRYCK HÄR");
Jag kommer uteslutande att använda literalen. / /
Nu när vi vet hur man skapar ett reguljärt uttrycksobjekt måste vi lära oss hur vi skriver
själva uttrycket.
Reguljära uttryck
Se till att ha lathunden framför dig när du tittar på följande:
Vi vill skapa ett reguljärt uttryck som söker efter ett årtal i en text. Årtalet ska vara på formen YYYY
och ligga mellan 1900 och 1999:
Vi kan börja med att skapa uttrycket tankemässigt:
"först ska 19 matchas en gång, efter det talen 0-9 två gånger."
Vi översätter nu detta till ett reguljärt uttryck:
19[0-9]{2}
Ovanstående uttryck kommer nu att leta efter år mellan 1900 och 1999. I strängen nedan är dessa
markerade.
"Landet blir en oberoende republik 1918, styrd av de socialdemokratiska mensjevikerna.
Konflikter med Armenien, Azerbajdzjan och bolsjevikernas i Ryssland, gör regeringen allt
mer nationalistisk. Relationerna till landets minoriteter försämras, med interna konflikter
som följd. Bolsjevikerna kan med turkiskt bistånd ockupera landet 1921, och ..."
Metoder
Metoder på ett reguljärt uttryck:
Metod
exec(string)
Matchar strängen mot pattern och returnerar en array med
träffar eller null.
test(string)
Testar om match. Returnerar true eller false
Metoder på en sträng:
Metod
split(pattern, gräns)
Delar en sträng till substrängar som lagras i en array.
match(pattern)
Letar efter en viss del av en text i en sträng.
Returnerar en array innehållande den hittade texten.
replace(pattern, str)
Byter ut en del av strängen mot något annat.
search(pattern)
Letar efter en viss del av en text i en sträng.
Returnerar indexet till den hittade texten. -1 om miss.
Reguljära uttryck
Nu vet vi hur reguljära uttryck skrivs. Nu återstår att se hur vi använder dessa
tillsammans med metoderna match(), split(), replace() och search()
Vi börjar med att göra ett test om en inmatad sträng enbart innehåller siffror
mellan 0 och 5:
// Skapa det reguljära uttrycket
var pattern = /^[0-5]+$/;
var svar = prompt(“Skriv in siffror mellan 0 och 5:", 0);
// Testa med match om strängen är OK
if (svar.match(pattern)){
alert(“Strängen är OK");
} else {
alert(“Strängen är inte OK");
}
Reguljära uttryck
Vi testar även att använda replace funktionen. Vi kan använda denna för att
ersätta otillåtna ord i en sträng mot en förvald sträng:
// Skapa det reguljära uttrycket
var pattern = /(gris)|(katt)|(hund)|(häst)/g;
var svar = prompt("Skriv in en text:", "");
svar = svar.replace(pattern, "djur");
alert(svar);
Ovan används replace() för att byta ut all text som matchar mot texten djur.
"Jag äger en gris" blir således "Jag äger en djur"
Validera formulär
Event på form-taggen
onsubmit
Inträffar precis innan formuläret skickas. Returneras false
skickas inte formuläret. (Utmärkt vid validering)
Enkelt valideringsexempel:
if(!myForm.elements["test"].value.match(/^[0-9]+$/))
{
alert("Enbart tal");
myForm.elements["test"].select();
return false; // Ser till att formuläret inte skickas
}
Klient- servervalidering
SERVER
KLIENT
Behandla data
skicka
FEL!
Ett klientskript
validerar
Här genomförs klientvalideringen.
Denna validering är enbart till för att
hindra "dumma" användare från att
glömma fylla i uppgifter och liknande.
Klientvalideringen är mycket enkel att
lura och ta sig förbi.
OK
OK
Servern validerar
Här genomförs servervalideringen.
Denna validering är till för att
kontrollera så att all data som skickas
för behandling är OK.
Servervalideringen går det inte att lura
och är därför bra för att förhindra
hackerattacker.