Välj Infoga > Spry > Spry-validerat lösenord.
Senast uppdaterad den
2 maj 2021
Obs!
Spry-widgetar ersätts med jQuery-widgetar i Dreamweaver CC och senare. Du kommer även fortsättningsvis att kunna ändra befintliga Spry-widgetar på din sida, men du kan inte lägga till nya.
Om widgeten Validera lösenord
Widgeten Spry-validerat lösenord är ett lösenordstextfält som du kan använda för att framtvinga lösenordsregler (till exempel antal och typ av tecken). Widgeten skapar varnings- eller felmeddelanden utifrån vad användaren skriver.
Obs!
Du bör känna till de olika Spry-valideringswidgetarna innan du börjar arbeta med lösenordswidgeten. Om du inte känner till dem läser du Arbeta med widgeten Spry-validerat textfält eller översikten för någon annan valideringswidget innan du fortsätter. I den här översikten beskrivs inte alla grundläggande begrepp för valideringswidgetar.
I följande exempel visas widgeten Validera lösenord i olika lägen:
A. Lösenordswidget, läge för minsta antal tecken B. Lösenordswidget, läge för högsta antal tecken C. Lösenordswidget, obligatoriskt läge
Widgeten Validera lösenord innehåller ett antal lägen (t.ex. giltig, ogiltig, obligatoriskt värde, minsta antal tecken o.s.v.). Du kan ändra egenskaperna för dessa lägen genom att redigera motsvarande CSS-fil (SpryValidationPassword.css), beroende på önskat valideringsresultat. Widgeten Validera lösenord kan validera vid flera tillfällen, t.ex. när besökarna klickar utanför textfältet, när de skriver eller när de försöker skicka formuläret.
Ursprungligt läge
När sidan läses in i webbläsaren, eller när användaren återställer formuläret.
Läget Fokus
När användaren placerar insättningspunkten i widgeten.
Läget Giltig
När användaren skriver information korrekt, och formuläret kan skickas.
Läget Ogiltig styrka
När användaren skriver text som inte matchar styrkevillkoret för lösenordsfältet. (Om du till exempel anger att ett lösenord måste innehålla minst två versaler, och lösenordet som skrivs innehåller färre versaler).
Läget Obligatorisk
När användaren inte skriver den obligatoriska texten i textfältet.
Läget Minsta antal tecken
När användaren skriver färre än det minsta antalet tecken som krävs i lösenordsfältet.
Läget Högsta antal tecken
När användaren skriver fler än det högsta antalet tecken som tillåts i lösenordsfältet.
En mer omfattande förklaring till hur widgeten Validera lösenord fungerar, samt annan information om widgetstrukturen, finns i www.adobe.com/go/learn_dw_sprypassword_se.
Infoga och redigera widgeten Validera lösenord
Infoga widgeten Validera lösenord
-
-
Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
Obs!
Du kan också infoga widgeten Validera lösenord genom att använda kategorin Spry på panelen Infoga.
Ändra obligatoriskt läge för widgeten Validera lösenord
Som standard kräver alla widgetar av typen Validera lösenord som du infogar med Dreamweaver användarindata när de publiceras på en webbsida. Du kan emellertid göra det valfritt för användaren att fylla i lösenordsfältet.
-
Markera widgeten Validera lösenord i fönstret Dokument genom att klicka på den blå fliken.
-
Markera eller avmarkera alternativet Obligatorisk, beroende på dina önskemål, i egenskapskontrollen (Fönster > Egenskaper).
Visa widgetstatus i designvyn
-
Markera widgeten Validera lösenord i fönstret Dokument genom att klicka på den blå fliken.
-
I egenskapskontrollen (Fönster > Egenskaper) väljer du det läge som du vill se på snabbmenyn Förhandsgranska lägen. Om du t.ex. vill se widgeten i giltigt läge väljer du Giltig.
Ange när valideringen inträffar
Du kan ange tillfället då valideringen sker – när besökaren klickar utanför widgeten, skriver eller försöker skicka formuläret.
-
Markera widgeten Validera lösenord i fönstret Dokument genom att klicka på den blå fliken.
-
I egenskapskontrollen (Fönster > Egenskaper) markerar du alternativet som anger när du vill att valideringen ska ske. Du kan markera alla alternativ, eller endast OnSubmit.
OnBlur
Validerar när användaren klickar utanför lösenordsfältet.
OnChange
Validerar allt eftersom användaren ändrar texten i lösenordsfältet.
OnSubmit
Validerar när användaren försöker skicka formuläret. Alternativet OnSubmit är markerat som standard och kan inte avmarkeras.
Ange lösenordets styrka
Lösenordets styrka innebär i vilken grad som vissa kombinationer av vissa tecken matchar kraven för ett lösenordsfält. Om du till exempel har skapat ett formulär där användarna väljer ett lösenord, kanske du vill se till att användarna tar med ett visst antal versaler i lösenordet, ett visst antal specialtecken och så vidare.
Obs!
Inga alternativ ställs in som standard för lösenordswidgeten.
Klicka på den blå fliken för widgeten Validera lösenord så att den markeras.
Ange önskade alternativ i egenskapskontrollen (Fönster > Egenskaper). De siffror som du anger i alternativfälten är det antal som krävs för validering. Om du till exempel skriver 8 i rutan för minsta antal tecken, valideras inte widgeten om användaren skriver färre än åtta tecken i lösenordsfältet.
Minsta/högsta antal tecken
Anger det minsta och högsta antal tecken som krävs för att lösenordet ska vara giltigt.
Minsta/högsta antal bokstäver
Anger det minsta och högsta antalet bokstäver (a, b, c och så vidare) som krävs för att lösenordet ska vara giltigt.
Minsta/högsta antal siffror
Anger det minsta och högsta antalet siffror (1, 2, 3 och så vidare) som krävs för att lösenordet ska vara giltigt.
Minsta/högsta antal versaler
Anger det minsta och högsta antalet versaler (A, B, C och så vidare) som krävs för att lösenordet ska vara giltigt.
Minsta/högsta antal specialtecken
Anger det minsta och högsta antalet specialtecken (!, @, # och så vidare) som krävs för att lösenordet ska vara giltigt.
Om något av ovanstående alternativ lämnas tomt kommer widgeten inte att validera mot det kriteriet. Om du till exempel lämnar alternativet Minsta/högsta antal siffror tomt, letar widgeten inte efter siffror i lösenordssträngen.
Anpassa widgeten Validera lösenord
Du kan göra enkla ändringar av widgeten Validera lösenord i egenskapskontrollen, men det går inte att skapa anpassad formatering. Du kan i stället ändra CSS för widgeten Validera lösenord om du vill skapa en widget som är formaterad efter eget behov. En mer avancerad lista med formateringsåtgärder finns på www.adobe.com/go/learn_dw_sprypassword_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryValidationPassword.css. Dreamweaver sparar filen SpryValidationPassword.css i mappen SpryAssets på platsen när du skapar en widget för Spry-validerat lösenord. Titta i denna fil eftersom den innehåller kommenterad information om olika typer av format som gäller för widgeten.
Obs!
Du kan på ett enkelt sätt redigera regler för widgeten Validera lösenord direkt i den tillhörande CSS-filen, men kan du också använda panelen CSS-format när du vill redigera CSS-formaten för widgeten. Panelen CSS-format är till nytta för att hitta CSS-klasserna som tilldelats olika delar av widgeten, i synnerhet om du använder läget Aktuell i panelen.
Fomatera widgeten Validera lösenord (allmänna instruktioner)
-
Öppna filen SpryValidationPassword.css.
-
Leta reda på CSS-regeln för den del av widgeten som du vill ändra. Om du till exempel vill ändra bakgrundsfärg för lösenordswidgetens obligatoriska läge redigerar du regeln input.passwordRequiredState i filen SpryValidationPassword.css.
-
Gör ändringarna i CSS och spara filen.
Filen SpryValidationPassword.css innehåller omfattande kommentarer som förklarar koden och syftet med vissa regler. Mer information finns i kommentarerna i filen.
Formatera felmeddelandetext för widgeten Validera lösenord
Som standard visas felmeddelanden för widgeten Validera lösenord i rött med en heldragen kant på 1 pixel runt texten.
-
Om du vill ändra textformatet för widgeten Validera lösenord använder du följande tabell för att leta reda på rätt CSS-regel och ändrar sedan standardegenskaperna eller lägger till egna egenskaper och värden för textformat.
Text som ska ändras
Relevant CSS-regel
Relevanta egenskaper som ska ändras
Text i felmeddelande
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
Ändra bakgrundsfärger i widgeten Validera lösenord
-
Om du vill ändra bakgrundsfärgen för widgeten Validera lösenord i olika lägen använder du följande tabell för att leta reda på rätt CSS-regel och ändrar sedan standardvärdena för bakgrundsfärgen.
Färg som ska ändras
Relevant CSS-regel
Relevant egenskap som ska ändras
Bakgrundsfärg i widget i giltigt läge
.passwordValidState input, input.passwordValidState background-color: #B8F5B1;
Bakgrundsfärg i widget i ogiltigt läge
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input background-color: #FF9F9F;
Bakgrundsfärg i widget i fokus
.passwordFocusState input, input.passwordFocusState background-color: #FFFFCC;
