Keskustelu: Nettisivujen teko: Salasanan tarkistus kirjoitusvaiheessa

Rocceri [08.06.2009 17:23:36]

Esimerkiksi kun luo Windows Live tunnusta, niin se tarkistaa jo kun kirjoittaa, vastaavatko salasanat toisiaan. https://signup.live.com/signup.aspx
Miten tälläinen tehdään? Veikkaan, että JavaScriptiä.

ajv [08.06.2009 17:28:34]

Jep, JS:llä, ensimmäinen hakutulos hakusanoilla password verification javascript:
http://www.jsr.communitech.net/pword.htm

Edit: eikun sori, en lukenut kysymystäsi tarkasti. Haluat siis varoituksen tulevan jo siinä vaiheessa, kun huomataan väärän merkin painallus?

Rocceri [08.06.2009 17:35:58]

Kyllä, jo siinä vaiheessa.

TeNDoLLA [08.06.2009 19:14:58]

Villi veikkaus, että tuossa tuo salasana kentän tarkistus tehdään kun focus lähtee pois tuosta salasanan varmistus kentästä. Eli jos haluaisi tehdä tarkastuksen jokaisen kirjoitetun kirjaimen jälkeen niin siihen hyvä eventti vois olla vaikka onkeyup (salasanan vahvistuskentässä). Ja javascriptillä joo.

Edit: Tein pikaseen jQueryllä pienen testin, en tiedä siitä onko paras tapa, mutta tällä tyylilläkin voi sen salasanan tarkistaa. Olen itsekin aika vasta alkanut käyttämään jQuery kirjastoa. Tuossa ei ole käsitelty tosiaan mitään muuta kuin kahden kentän täsmääminen ja sen mukaan tulostetaan viesti.

JavaScript

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function tarkista()
{
	var p1 = $('#p1').val();
	var p2 = $('#p2').val();
	if (p1 == p2)
	{
		$('#error').hide();
		$('#msg').show();
	}
	else
	{
		$('#msg').hide();
		$('#error').show();
	}
}

$(function () {
	$('#error').hide();
	$('#msg').hide();
});
</script>

HTML

<form action="" method="POST">
<p>Anna salasana: <input type="password" name="p1" id="p1"/ ></p>
<p>Salasana varmistus: <input type="password" name="p2" id="p2" onkeyup="tarkista();"/></p>
<p><div id="error"><span style="color: red">Passut ei mätsää.</span></div></p>
<p><div id="msg"><span style="color: green">Passun tarkistus ok!</span></div></p>
</form>

Edit 2: Tuo pätkähän ei missään nimessä siis ole täydellinen, jos esim. käyttäjä päättääkin mennä takaisin muuttamaan salasanaa kentässä p1, niin hommat alkaa kusta jo tuon tarkistuksen osalta. Tän oli vain tarkotus olla helppo esimerkki mihin tyyliin sitä voi lähteä toteuttaan ja siitä voi sitten itse värkätä mieleisekseen ja lisätä toimintoja. Lisäksi myös jQueryssä on valmiita lisäosia, joilla pystyy varmasti paremmin validoimaan passwordin, kuin myös muutkin formikentät. Ja muistaakseni joskus on vastaan tullut valmis palikka, joka myös tarkastaa passun vahvuuden.

http://docs.jquery.com/Plugins/Validation
http://riderdesign.com/articles/Password-strength-validation-with-jQuery.aspx

Metabolix [08.06.2009 21:42:01]

Tässä on ilman lisäkirjastoja toimiva ratkaisu.

function check() {
  var pwd1 = document.getElementById("pwd1").value;
  var pwd2 = document.getElementById("pwd2").value;
  var error = document.getElementById("error");
  while (error.lastChild) {
    error.removeChild(error.lastChild);
  }
  if (pwd1.substr(0, pwd2.length) != pwd2) {
    error.appendChild(document.createTextNode("Virhe!"));
  } else if (pwd1.length > pwd2.length) {
    error.appendChild(document.createTextNode("Kesken!"));
  }
}

<input type="password" id="pwd1" onkeyup="check()" />
<input type="password" id="pwd2" onkeyup="check()" />
<span style="color: red; text-decoration: blink; font-weight: bold;" id="error"></span>

Rocceri [08.06.2009 21:47:16]

Hienoa Metabolix!
EDIT: Vähän muokkasin, jotta näyttäisi jos on oikein:

<script>function check() {
  var pwd1 = document.getElementById("pwd1").value;
  var pwd2 = document.getElementById("pwd2").value;
  var error = document.getElementById("error");
  while (error.lastChild) {
    error.removeChild(error.lastChild);
  }
  if (pwd1.substr(0, pwd2.length) != pwd2) {
    error.appendChild(document.createTextNode("Virhe!"));
  } else if (pwd1.length > pwd2.length) {
    error.appendChild(document.createTextNode("Kesken"));
  }
  else if (pwd1.lengh == pwd2.lengh) {
  oikein.appendChild(document.createTextNode("Oikein!"));
  }
}</script>

<input type="password" id="pwd1" onkeyup="check()" />
<input type="password" id="pwd2" onkeyup="check()" />
<span style="color: red; text-decoration: blink; font-weight: bold;" id="error"></span>
<span style="color: lime; text-decoration: blink; font-weight: bold;" id="oikein"></span>

Tämä nyt vaan ei oikein toimi... :/ Mistä on kyse? Tulostaa väärin nuo Oikein tekstit.

TeNDoLLA [08.06.2009 22:12:50]

Ensinnäkin sulla on tuolla kirjotus virheitä lengh ei ole sama kuin length. Toiseksi tuohon riittää lopuksi pelkkä else, koska se viimeinen jäljelle jäävä vaihtoehto on se kun passut on oikein. Kolmanneksi tuossa sun ehdossa jos se ois oikein kirjoitettu length, niin tarkistaisit vain, että täsmääkö kahden eri passun pituudet keskenään ja päästäisit läpi. Tarkoitus olisi varmasti tarkastaa, että ne passut täsmää eikä vain, että niiden pituus on sama.

Grez [08.06.2009 22:46:35]

TeNDoLLA: Se yhtenevyyshän on jo tarkistettu tuossa ekassa kohdassa, jos pituudet on samat. Eli sikäli tuo pituuksien vertailu on tavallaan järkevä. Metabolixin koodihan ei näytä "virhe" tai "kesken" jos pwd2 on pidempi.

Itse laittaisin silti ennemmin näin päin:

<script>function check() {
  var pwd1 = document.getElementById("pwd1").value;
  var pwd2 = document.getElementById("pwd2").value;
  var error = document.getElementById("error");
  while (error.lastChild) {
    error.removeChild(error.lastChild);
  }
  if (pwd2.length > pwd1.length || pwd1.substr(0, pwd2.length) != pwd2) {
    error.appendChild(document.createTextNode("Virhe!"));
  } else if (pwd1.length > pwd2.length) {
    error.appendChild(document.createTextNode("Kesken"));
  } else {
    oikein.appendChild(document.createTextNode("Oikein!"));
  }
}</script>

<input type="password" id="pwd1" onkeyup="check()" />
<input type="password" id="pwd2" onkeyup="check()" />
<span style="color: red; text-decoration: blink; font-weight: bold;" id="error"></span>
<span style="color: lime; text-decoration: blink; font-weight: bold;" id="oikein"></span>

TeNDoLLA [08.06.2009 23:24:42]

Niinhän se onkin kun tarkemmin ajattelee, eli tuo toisen pituuden tarkistus uupui + else oikein haara.

Rocceri [09.06.2009 08:00:48]

Joo, toimii tuo hyvin, mutta ei tee sitä virhettä tyhjäksi. Koittakaas:
Kirjoittakaa kumpaankin jotain. Sitten lisätkää kummankin perään jokin kirjain; lopputulos on 2 'Oikein!' tekstiä. Se siinä on lähinnä ongelma.

Grez [09.06.2009 09:43:23]

Sinänsä harmi ettei tuo koodaamisesi ole juurikaan edistynyt tuosta copy&paste -tasosta.. Muuten olisit itsekin huomannut mikä on vialla.

Eli sieltähän puuttuu tuon lisäämäsi "oikein" -elementin sisällä olevien juttujen poistaminen, jota en huomannut lisätä sinne kun keskityin vaan tuohon if-lauseeseen.

<script>function check() {
  var pwd1 = document.getElementById("pwd1").value;
  var pwd2 = document.getElementById("pwd2").value;
  var error = document.getElementById("error");
  while (error.lastChild) {
    error.removeChild(error.lastChild);
  }
  var oikein = document.getElementById("oikein");
  while (oikein.lastChild) {
    oikein.removeChild(error.lastChild);
  }
  if (pwd2.length > pwd1.length || pwd1.substr(0, pwd2.length) != pwd2) {
    error.appendChild(document.createTextNode("Virhe!"));
  } else if (pwd1.length > pwd2.length) {
    error.appendChild(document.createTextNode("Kesken"));
  } else {
    oikein.appendChild(document.createTextNode("Oikein!"));
  }
}</script>

<input type="password" id="pwd1" onkeyup="check()" />
<input type="password" id="pwd2" onkeyup="check()" />
<span style="color: red; text-decoration: blink; font-weight: bold;" id="error"></span>
<span style="color: lime; text-decoration: blink; font-weight: bold;" id="oikein"></span>

Teuro [09.06.2009 13:00:47]

Tässä on vielä hifistelyn vuoksi aika hyvä rekisteröintitarkistus javascriptin avulla. Syötetylle salasanalle on tehty aika laajat muotovaatimukset, mutta samalla sitä tulee esiteltyä noita mahdollisuuksia.

Muuttujien nimeäminen meni jossakin vaiheessa rikki, mutta koittakaa kestää kaksikielinen koodihirviö.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Salasanan tarkistus</title>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<script type="text/javascript">
function check() {
	var pwd1 = document.getElementById("pwd1").value;
	var pwd2 = document.getElementById("pwd2").value;
	var info = document.getElementById("info");
	var user = document.getElementById("user").value;

	var OK = "green";
	var ERROR = "red";

	num = new RegExp("[.]?[0-9]+");
	iso = new RegExp("[.]?[A-Z]+");
	pieni = new RegExp("[.]?[a-z]+");
	tun = new RegExp("[.]?"+user+"[.]?");

	if(num.test(pwd1)){
		numero.style.color = OK;
	}else{
		numero.style.color = ERROR;
	}

	if(iso.test(pwd1)){
		isot.style.color = OK;
	}else{
		isot.style.color = ERROR;
	}

	if(pieni.test(pwd1)){
		pienet.style.color = OK;
	}else{
		pienet.style.color = ERROR;
	}

	if(!tun.test(pwd1) && pwd1.length > 0){
		tunnus.style.color = OK;
	}else{
		tunnus.style.color = ERROR;
	}

	if(pwd1.length > 5){
		pituus.style.color = OK;
	}else{
		pituus.style.color = ERROR;
	}

	if (pwd1 == pwd2 && pwd1.length > 0) {
		sama.style.color = OK;
	}else{
		sama.style.color = ERROR;
	}

	while (info.lastChild) {
		info.removeChild(info.lastChild);
	}

	if (pwd1.substr(0, pwd2.length) != pwd2) {
		info.appendChild(document.createTextNode("Virhe!"));
	} else if (pwd1.length > pwd2.length) {
		info.appendChild(document.createTextNode("Kesken!"));
	}

}
</script>
</head>
<body>
<form action="tarkista.php" method="post">
<table>
<tr>
<td>tunnus</td><td><input type="text" id="user" /></td>
</tr>
<tr>
<td>Salasana 1</td><td><input id="pwd1" type="password" onkeyup="check()" /></td>
</tr>
<tr>
<td>Salasana 2</td><td><input id="pwd2" type="password" onkeyup="check()" /></td>
</tr>
<tr>
<td><input type="submit" value="Lähetä" /></td>
</tr>
</table>
</form>

<p>Salasanan tulee sisältää:</p>
<ul>
<li style="color: red" id="numero">Numeroita 0-9</li>
<li style="color: red" id="isot">Isoja kirjaimia A-Z</li>
<li style="color: red" id="pienet">Pieniä kirjaimia a-z</li>
<li style="color: red" id="pituus">yli 5 merkkiä</li>
<li style="color: red" id="sama">Samanlainen ekan kanssa</li>
<li style="color: red" id="tunnus">Ei saa sisältää tunnusta</li>
</ul>
<p id="info"></p>
</body>
</html>

Metabolix [09.06.2009 13:12:38]

Grez kirjoitti:

Metabolixin koodihan ei näytä "virhe" tai "kesken" jos pwd2 on pidempi.

Näyttää. Jos pwd2 on pidempi, ensimmäisen vertailun substr tuottaa koko pwd1:n, pwd1 on eri kuin pwd2 ja tuloksena on "virhe".

Kuten TeNDoLLa sanoi, pelkkä else riittää lopussa. Virheellisestä vertailusta ei tuossa ole haittaa, koska sekä pwd1.lengh että pwd2.lengh ovat määrittelemättömiä ja vertailun tulos on aina tosi.

Varsinainen virhe Roccerin minulta kopioimassa ja muokkaamassa koodissa on, että oikein-elementtiä ei ole haettu document.getElementById:llä eikä tyhjennetty. Järkevämpää tietenkin olisi käyttää valmiita virheilmoituksia ja vain piilottaa ja näyttää niitä, mutta tyhmään kysymykseen annoin tyhmän vastauksen, kun kysyjä ei ole taaskaan nähnyt sitä vaivaa, että olisi itse opetellut JavaScriptia vaikkapa Ohjelmointiputkassa olevasta oppaasta.

Grez [09.06.2009 14:51:05]

Joo, oikeinhan se tietysti oli.. Luin taas omiani. Anteeksi kaikille.

Smuliii [09.06.2009 19:34:07]

Tuli tästä mieleen LiveValiditon.

TeNDoLLA [09.06.2009 20:35:06]

Smuliii kirjoitti:

Tuli tästä mieleen LiveValiditon.

Ei toimi tuo, jos eka laittaa passu2:sen ja sitten vasta täyttää sen passu1 kohdan. Ei myöskään toimi, jos laittaa eka passut samoiksi ja sitten muokkaa passu2:sta ja sen jälkeen passu ykköstä. Liittynee molemmat samaan tarkistukseen.

Teuro [09.06.2009 20:46:59]

TeNDoLLA kirjoitti: