Vahvista salasanakentät on lisättävä, kun teet online-lomakkeita, joissa pyydetään käyttäjiä asettamaan salasana. Salasanakenttä piilottaa oletusarvoisesti käyttäjän syöttämän syötteen, joten tarvitaan jonkinlainen mekanismi, jonka avulla käyttäjät voivat varmistaa kirjoittaneensa oikean salasanan tekemättä kirjoitusvirheitä. Vahvista salasana -kenttä kehottaa käyttäjää tarkistamaan salasanansa uudelleen, jos hän kirjoittaa väärin merkkejä ja salasana- ja vahvistussalasanakentät eivät täsmää.
Tässä viestissä tavoitteenamme on tehdä HTML-lomake, joka vastaa käyttäjän syötteitä Salasana ja Vahvista salasana kenttiin varmistaaksesi, onko käyttäjä kirjoittanut oikean salasanan vai tehnyt kirjoitusvirheitä.
Vaihe 1: HTML-lomake
Ensimmäinen askel on tehdä HTML-lomake, joka ottaa käyttäjän syötteen:
< keskusta >
< h2 > Linux-vinkki h2 >
< muodossa >
< s > Kirjoita salasana s >
< syöttö tyyppi = 'Salasana' id = 'kulkea' > < br >< br >
< s > Vahvista salasana s >
< syöttö tyyppi = 'Salasana' id = 'vahvista' > < br >< br >
< -painiketta tyyppi = 'Lähetä' klikkaamalla = 'salasanan vahvistus()' > Hirsi sisään -painiketta >
muodossa >
keskusta >
Olemme luoneet yksinkertaisen HTML-lomakkeen, jossa on kaksi salasanatyyppistä syöttökenttää ja kirjautumispainike, joka kutsuu salasanan vahvistus() toiminto, kun sitä napsautetaan.
Vaihe 2: JavaScript-lomakkeen validointi
Nyt kirjoitamme JavaScript-koodin sisään salasanan vahvistus() toiminto, joka vahvistaa salasanan:
toiminto salasanan vahvistus ( ) {
var salasana = document.getElementById ( 'kulkea' ) .arvo;
var confirmPassword = document.getElementById ( 'vahvista' ) .arvo;
jos ( salasana == '' ) {
hälytys ( 'Virhe: Salasanakenttä on tyhjä.' ) ;
} muu jos ( salasana == VahvistaSalasana ) {
hälytys ( 'Kirjautunut sisään' ) ;
} muu {
hälytys ( 'Varmista, että salasanasi täsmäävät.' )
}
}
Sisällä salasanan vahvistus() funktiolla saamme ensin salasanan arvot ja vahvistamme salasanakentät ja tallennamme ne muuttujien sisään. Käytämme sitten ehdollisia lausekkeita eri tapausten tarkistamiseen.
Tapaus 1: Salasanakenttä on tyhjä
Ensimmäinen ehto tarkistaa, onko salasanakenttä tyhjä. Kehotamme käyttäjää syöttämään salasanan, jos kenttä on tyhjä:
Tapaus 2: Salasanat täsmäävät
Jos salasanat täsmäävät, käyttäjä kirjautuu sisään onnistuneesti:
Tapaus 3: Salasanat eivät täsmää
Jos salasanat eivät täsmää, pyydämme käyttäjää kirjoittamaan salasanat uudelleen ja varmistamaan, että ne täsmäävät:
JavaScript- ja HTML-koodi yhdessä näyttää suunnilleen tältä:
< html >
< kehon >
< keskusta >
< h2 > Linux-vinkki h2 >
< muodossa >
< s > Kirjoita salasana s >
< syöttö tyyppi = 'Salasana' id = 'kulkea' > < br >< br >
< s > Vahvista salasana s >
< syöttö tyyppi = 'Salasana' id = 'vahvista' > < br >< br >
< -painiketta tyyppi = 'Lähetä' klikkaamalla = 'salasanan vahvistus()' > Hirsi sisään -painiketta >
muodossa >
keskusta >
kehon >
< käsikirjoitus >
toiminto salasanan vahvistus ( ) {
var salasana = document.getElementById ( 'kulkea' ) .arvo;
var confirmPassword = document.getElementById ( 'vahvista' ) .arvo;
jos ( salasana == '' ) {
hälytys ( 'Virhe: Salasanakenttä on tyhjä.' ) ;
} muu jos ( salasana == VahvistaSalasana ) {
hälytys ( 'Kirjautunut sisään' ) ;
} muu {
hälytys ( 'Varmista, että salasanasi täsmäävät.' )
}
}
käsikirjoitus >
html >
Johtopäätös
Ihmiset voivat usein tehdä virheitä, mutta sen ei pitäisi estää heitä kirjautumasta tililleen. Pieninkin virhe salasanan syöttämisessä voi rajoittaa käyttäjän pääsyä tililleen. Joten on aina hyvä idea tarkistaa käyttäjän salasana varmistaaksesi, että hän on syöttänyt oikean salasanan.