Ověření unikátnosti uživatelského jména u klienta
Školení, která pořádám 
Při vyplňování formuláře uživatelé ocení, když jim už na straně klienta oznámíme, že něco vyplnili špatně. Data se tak nemusí přenášet neustále tam a zpět a práce je mnohem plynulejší. U obvyklých kontrol neprázdnosti nebo vyhovování masce to jde poměrně snadno, u ověření existence uživatelského jména (nebo obecně jakéhokoliv údaje, který musí být jednoznačný) je potřeba dát pozor i při ověření na straně serveru. Jak se to dá řešit na straně klienta?
Nápad přenášet ke klientovi všechna existující uživatelská jména není zrovna nejšťastnější, protože se může jednat o citlivé údaje. Při přenášení hashů jmen prozradíme přinejmenším jejich počet, navíc při velkém množství těchto údajů je jejich přenášení zbytečně zdlouhavé.
Zjišťovat existenci daného uživatelského jména tedy bude lepší až poté, co ho uživatel vyplní. Jedna možnost je použít AJAX, ten mi ale přijde jako zbytečně silná zbraň. Druhou možností je dynamicky načítat JavaScript s kódem, který ověření provede:
<script type="text/javascript">
function check(s) {
var checker = document.createElement('script');
checker.src = 'login_exists.php?login=' + encodeURI(s);
document.getElementById('regform').appendChild(checker);
return false;
}
</script>
<form id="regform" action="" method="post" onsubmit="return check(this['login'].value);">
Login: <input name="login" />
<input type="submit" value="OK" />
</form>
Skript login_exists.php potom může vypadat takhle:
<?php header("Content-Type: text/javascript"); if (mysql_result(mysql_query("SELECT COUNT(*) FROM uzivatele WHERE login = '" . mysql_real_escape_string($_GET["login"]) . "'"), 0)) { echo "alert('Zadaný login již existuje.');\n"; } else { echo "document.forms['regform'].submit();\n"; } ?>
Funkce check() zahájí načítání skriptu a oznámí prohlížeči, ať formulář zatím neodesílá. O to se případně postará až kód vygenerovaný skriptem login_exists.php. Pokud ale zadaný login už existuje, zobrazí se uživateli informace. Bez JavaScriptu se formulář odešle standardně.
Připomínám, že takováto kontrola může sloužit pouze pro zlepšení uživatelova dojmu, kontrola na serveru zůstává nepostradatelná.
Přijďte si o tomto tématu popovídat na školení JavaScript a AJAX.
Diskuse
Leo:
Akorat bych pri dalsim pokusu neapendoval, ale replacechildoval :-) Leotark:
vypadá to dobře!karel:
nevím, proč by měl být Ajax silná zbraň? Kód by byl zhruba stejně dlouhý a neděla by se tam taková věc, jako je přidávání javascriptu do DOM...Jakub:
Souhlasim s karlem. AJAX je pro tohle jako stvoreny. Zajimalo by me, kde bys ho chtel pouzivat kdyz ne u vyhravcicek v UI jako je tahle...Oswald:
Myslím, že způsob přes dynamický vytvořený script je pro takouvouhle mini-aplikaci nejjednoduší. Zrovna mynulý týden jsem tohle řešil a udělal to přes Ajax (http://cal.webkitchen.cz/reg.php). Ještě poznámka: funkce encodeUri je na kompletní URL, na vytváření query stringu je vhodnější encodeURIComponent.Leo:
Ajax ma jednu podstatnou vadu - v IE neni defacto realizovany JavaScriptem ale ActiveXem, bez nej si tam ani neu... vsak vite co. DOM reseni je mnohem cistsi, na takovyhle jednoduchy veci, kde nepotrebuju treba POST nebo modifikovat ci cist HTTP hlavicky. LeoOswald:
Tak ten minulý komentář se mi - z češtinářského hlediska - opravdu povedl :-)Ondra:
Rad bych pripomel, ze i toto reseni je AJAX. Ac si mnozi mysli, ze AJAX === XmlHTTPRequest, neni tomu tak - AJAX je souhrnny nazev pro princip/technologii, jez je zde evidentne vyuzivana. Nebot cely proces overovani formularoveho prvku je tezce asynchronni a realizovan JavaScriptem :)
Jakub Vrána 
:
AJAX = Asynchronous JavaScript and XML. Takže tohle není AJAX, protože XML použito není.
Jakub Vrána : 
llook:
Názory na definici AJAXu se různí. Moje soukromá definice je zhruba "prvky RIA, realizované pomocí základních vlastností webového prohlížeče". Já bych to za AJAX považoval.
Obecně pokud použiju "část technologie", říkám že používám "technologii".
llook: Leo:
A ja tomu vsemu rikam komunikace klient-server JavaScriptem na pozadi stranky. Nabubrele skatulky jako RIA nemam rad (stejnojmenna cokoladka ovsem kdysi sla :-) Leo
spaze:
RIA je něco jinýho než čikuládka ne? :P
http://www.hartmann.cz/obsah/?damska_hygiena
Jinak RIA = Rich Internet Application, tak jest?
spaze: roman:
ahojte, zkousel jsem vlozit uvedeny sample do meho kodu, ale ie hlasi chybu jscriptu na line 2 char 1 - syntax error.kdyz zmenim hodnotu v zavorce 'function check(s)' na prazdne misto nebo neco jineho napr. user, protoze tak se jmenuje moje pole tak se zadna chyba nevygeneruje, nicmene script nefunguje.
pls help
jaja:
Chybu mas nekde v tom login_exists.php zkus si jej odladit samostatne. Pak to chodi.Diskuse je zrušena z důvodu spamu.
© 2005-2024 