Compruebe disponibilidad nombre de usuario y la validación con Ajax, PHP

Así que va a crear un formulario de registro y desea crear un nombre de usuario buscando la validación de lujo de la escritura de Ajax. Sé que se ve de lujo cuando te registras para Gmail o Yahoo buzón de correo, en lugar de este tipo de validación son ahora cada formulario de registro.

Vamos a crear este script simple usando Javascript, Ajax, y por supuesto PHP para la interacción entre el servidor. En este script PHP que no he mostrado cómo se puede validar que el uso de MySQL, ya que no es el motivo de este artículo. Así que todo lo que tiene que hacer es poner en práctica la lógica MYSQL para que le devuelve un resultado correcto de la disponibilidad de nombre de usuario. Estoy utilizando una variable booleana llamada $ disponible en script PHP. Puede activar y apagar (usando verdadero y falso) para probar el funcionamiento de guión completo.

La lógica del lado del servidor para la disponibilidad de nombre de usuario (validation.php)

<?php

$user = strip_tags(trim($_REQUEST['username']));

if(strlen($user) <= 0)

{

  echo json_encode(array('code'  =>  -1,

  'result'  =>  'Invalid username, please try again.'

  ));

  die;

}

// Query database to check if the username is available

$query = "Select * from USERS where username = '$user' ";

// Execute the above query using your own script and if it return you the

// result (row) we should return negative, else a success message.

$available = true;

if($available)

{

  echo json_encode(array('code'  =>  1,

  'result'  =>  "Success,username $user is still available"

  ));

  die;

}

else

{

  echo  json_encode(array('code'  =>  0,

  'result'  =>  "Sorry but username $user is already taken."

  ));

  die;

}

die;

?>

El código HTML y Ajax. (Validate.html)

<script type="text/javascript">

  //function to create ajax object

  function pullAjax(){

    var a;

    try{

      a=new XMLHttpRequest()

    }

    catch(b)

    {

      try

      {

        a=new ActiveXObject("Msxml2.XMLHTTP")

      }catch(b)

      {

        try

        {

          a=new ActiveXObject("Microsoft.XMLHTTP")

        }

        catch(b)

        {

          alert("Your browser broke!");return false

        }

      }

    }

    return a;

  }

  function validate()

  {

    site_root = '';

    var x = document.getElementById('uname');

    var msg = document.getElementById('msg');

    user = x.value;

    code = '';

    message = '';

    obj=pullAjax();

    obj.onreadystatechange=function()

    {

      if(obj.readyState==4)

      {

        eval("result = "+obj.responseText);

        code = result['code'];

        message = result['result'];

        if(code <=0)

        {

          x.style.border = "1px solid red";

          msg.style.color = "red";

        }

        else

        {

          x.style.border = "1px solid #000";

          msg.style.color = "green";

        }

        msg.innerHTML = message;

      }

    }

    obj.open("GET",site_root+"validate.php?username="+user,true);

    obj.send(null);

  }

</script>

<style>

#uname{border: 1px solid #000;}

</style>

<input type="text" id="uname" name="uname" value="" />

<input type="button" onclick="validate();" value="Check Availability" />

<div id="msg"></div>

Cómo hacer que funcione

Es muy sencillo de hacer este trabajo guión. Se necesitan dos archivos, un archivo HTML (por ejemplo, validate.html) y un archivo PHP (por ejemplo, validate.php) para interactuar con la base de datos y comprobar la disponibilidad del nombre de usuario requerido. Mantenga los dos archivos en la misma carpeta para hacer que funcione correctamente, de lo contrario si desea mantener el archivo PHP en otro lugar, a continuación, se puede especificar la ruta absoluta utilizando la "site_root" variable definida en Javascript. También puede mantener el código Javascript en archivo JS separada para mantener el código limpio. Lo más importante es mantener los nombres de identificación de los elementos HTML mismos que los que se van a utilizar en el código JS.

Así que ahora usted tiene su propia forma de Inscripción con las campanas y silbatos. Esperamos que este código le ayuda. Algunos pueden no estar cómodo en el uso de eval en el código Javascript, puede lidiar con JSON la forma que le guste.