Controllare in tempo reale se una username esiste

In questo tutorial andremo a scoprire come creare una form che vada a controllare, tramite AJAX, se un username è già in uso da un altro utente. Il codice, integrato in una form di registrazione, risulterà particolarmente utile perchè permetterà a colui che si vuole registra di sapere se l' username da lui scelto è già in uso da un altro utente.

Come prima cosa va costruita la pagina ASP (usercheck.asp) incaricata di effettuare il controllo dinamico; dovrò ricevere un parametro (GET) "username" e mostrare un messaggio nel caso in cui sia o non sia già presente nel database dei registrati:

'se c'è uno spazio nell' username, viene dato come invalido
    if InStr(request("username")," ") then
        response.write "No spazi nell' username."
    else
            'connessione al database ed operazioni su di esso
            dim strConn, dbConn, RS  
                '...impostare la stringa di connessione al DB
        dbConn.open(strConn)
     
        'query al database
        set RS = dbConn.execute("SELECT count(*) AS cnt FROM blog_comment " &_
                          "WHERE username = " & request.querystring("username"))
    
        'controllo se è preso o no
        if RS("cnt") > 0 then
            response.write "Scusa, " & request.querystring("username") &_
                                 " è già in uso da un altro utente."
            else
            response.write "" & "Congratulazioni  " & request.querystring("username") &_
                                 " è disponibile!."
        end if
    end if

Come si potrà notare, ci sono 3 possibili risposte supportate dallo script.

Cosa successiva da fare è la scrittura di una funzione ajax.js:

// va richiamata all' input nella textbox
// aprirà la pagina usercheck.asp inviandole 
// l' username che l' utente vuole utilizzare

function sndUserCheck(action)
{
     http.open("get" , "usercheck.asp?username=" 
                    + action);
     http.onreadystatechange = handleResponse;
     http.send(null);
}

Ogni volta che tal funzione viene chiamata, invierà una XMLHttpRequest ad usercheck.asp contenente l' username scelto dall' utente.

Infine, ecco il codice relativo all' interfaccia della pagina:

<HTML>
<TITLE>Controllo username in AJAX</TITLE>

<!-- Funzioni AJAX -->
<script type="text/javascript" src="ajax.js">
</script>

<BODY>

<form name="FormAccount">   
    <input type="text" id="formUserName" 
        name="formUserName">
    <input type="button" value="Check" 
        onclick=
"sndUserCheck(document.FormAccount.formUserName.value);">
</form>

    <br><br>
        
    <div id="TakenOrNot"></div>

</BODY>
</HTML>

La pagina, come si può intendere da sopra, avrà un campo di testo nel quale l' utente può inserire l' username che vorrebbe usare, avrà un bottone che darà avvio al controllo ed un oggetto div che mostrerà la risposta. Da notare che l' input dell' utente viene recuperato in questo modo:

document.FormAccount.formUserName.value

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?