cargando...

Forma de registro y acceso usando jQuery

Estos formularios validan la información en tiempo real, en dos casos remotamente llamando a una base de datos, y verificando si están disponibles el usuario y el correo electrónico.

Se utilizan los siguientes plugins de jQuery:

El código de los archivos php que manejan los llamados ajax aún no están disponibles. La documentación del código mostrado aún no se muestra.

Puedes registrar un usuario para probar el sistema. Tu información no será compartida con nadie. La contraseña se procesa, se envía y se guarda de forma segura mediante el algoritmo SHA256.

Registro de usuario

Entrar al sistema

Código fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Registro y login con Ajax usando jQuery</title>
  <style type="text/css">
   body { font-family: Arial,sans-serif; color: #444; padding: 20px; }
   label {  float: left; margin: 13px 0 0 7px; text-align:left; color: red; width:108px; font-size: 13px; font-weight: 500; letter-spacing: -1px; }
   .la { float: left; margin: 13px 0 0 0; text-align:right; color: #444; width:108px; font-size: 13px; font-weight: 500; letter-spacing: -1px; }
   input { font-family: Arial,sans-ser9; float: left; margin: 10px 0 0 8px; padding: 3px; font-size: 13px; height: 19px; border: solid 1px gray; }
   .boton { display: block; font-family: Arial,sans-serif; text-align: center; font-size: 13px; padding: 5px 8px 5px 8px; background: #EEE; color: #222; margin: 10px 0 0 200px; vertical-align: middle; height: auto;}
   #formaMensaje { font-size:12px; text-align:left; padding: 0 0 0 250px; margin: 15px 0 15px 0; }
   .clear{clear:both;}
   
   #cont{}
   .izquierda{float:left;width:40%;margin: 0 10px 0 0;z-index:2;}
   .derecha{float:right;width:33%;}
   #resultado{border:solid 1px gray;padding:20px;font-size:14px; font-weight: 600; display: none;}
   #htmlStatus{position:fixed;top:0;left:0;padding: 10px 30px 10px 30px;font-size:12px;background:#B4DE89;border:solid 3px #7C995E;font-weight:600;letter-spacing:-1px;color:#333;}
   #resultadoLogin{border:solid 2px #7C995E;padding:20px;font-weight:600;color:#465635;background:white;display:none;}
 #notifVerde{ width:100%;  background-color:#cfc;  color:#051;  z-index:300;  text-align:center;  position:fixed;  top:0px;  left:0px;  padding:30px 0px;  font-family:Arial,serif;  font-size:18px;  display:none}
 #notifRojo{ width:100%;  background-color:#fcc;  color:#510;  z-index:300;  text-align:center;  position:fixed;  top:0px;  left:0px;  padding:30px 0px;  font-family:Arial,serif;  font-size:18px;  display:none}
 
  </style>
  </head>
  <body>
  <div id="notifRojo"></div>
  <div id="notifVerde"></div>
   <div id="cont">
     <div class="izquierda">
    <form id="forma" action="_php_registrarUsuario.php" method="post" name="forma">
    <h1>Registro de usuario</h1>
     <fieldset>
     <label class="la" for="usuario">Usuario:</label><input type="text" name="usuario"></input><div class="clear"></div>
     <label class="la" for="pass">Contraseña:</label><input type="password" name="pass" id="pass"></input><div class="clear"></div>
     <label class="la" for="pass_checa">Verifica la contraseña</label><input type="password" name="pass_checa" id="pass_checa"></input><div class="clear"></div>
     <label class="la" for="email">Email:</label><input type="text" name="email"></input><div class="clear"></div>
     <label class="la" for="nombre">Nombre:</label><input type="text" name="nombre"></input><div class="clear"></div>
     <label class="la" for="lastname1">Apellido paterno:</label><input type="text" name="lastname1"></input><div class="clear"></div>
     <label class="la" for="lastname2">Apellido materno:</label><input type="text" name="lastname2"></input><div class="clear"></div>
     <label class="la" for="nacimiento">Fecha de nacimiento (dia/mes/año):</label><input type="text" name="nacimiento"></input><div class="clear"></div>
      <div style="margin:10px 0 8px 120px;">
     <div id="imagen_captcha" style="height:90px;width:130px;"></div><div id="resultado" style="float:left;margin:0 0 0 5px;"></div>
     <div class="clear"></div>
    <div class="clear"></div>
      </div>
     <label class="la" for="captcha">Código de la imagen mostrada:</label><input type="text" name="captcha" id="captcha_answer"></input><div class="clear"></div>
     <label class="la" for="terminos">¿Estás de acuerdo con los <a href="#">términos y condiciones?</a></label><input type="checkbox" name="terminos"></input><div class="clear"></div>
     <div id="formaMensaje"></div>
     <input type="submit" class="boton" value="registrarme" id="envia"></input>
     </fieldset>
    </form>
    <div id="resultadoForma"></div>
     </div>
     
     
     <div class="izquierda">
    <form id="ingreso" name="ingreso" method="post" action="">
    <h1>Entrar al sistema</h1>
     <fieldset>
      <label class="la" for="login_usuario">Usuario o e-mail:</label><input type="text" name="login_usuario"></input><div class="clear"></div>
      <label class="la" for="login_pass">Contraseña:</label><input type="password" name="login_pass"></input><div class="clear"></div>
      <input type="submit" class="boton" value="ingresar" id="ingresar"></input>
     </fieldset>
    </form>
    <div id="resultadoLogin"></div>
     </div>
     <div class="clear"></div>
   </div>

 
   <script type="text/javascript" src="scripts/jq.js"></script>
   <script type="text/javascript" src="scripts/jq.notify.js"></script>
   <script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
   <script type="text/javascript" src="scripts/jq.form.js"></script>
   <script type="text/javascript" src="scripts/sec.js"></script>
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript">
  
   /** 
   * Forma de registro y acceso usando jQuery
   * @author Luis Pulido <luis@luispulido.com> <http://luispulido.com> <http://twitter.com/pulidoman> 
   * @pubdate Sunday, August 23th, 2009 
   * @license cc (see below this page)
   */ 
   var capid = "";
   function generarCaptcha(){
    capid = "";
    var arr = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9',',','-');
    for(var i=0;i<15;i++)
     capid+= arr[Math.round(Math.random()*arr.length)];
    $("#imagen_captcha").html('<img onclick="generarCaptcha()" src="http://captchator.com/captcha/image/' + capid + '" />');
    $("#captcha_answer").val("");
    $("#forma > captha")
   }
   function reiniciarForma(){
    $("#forma").clearForm();
    $("#forma").fadeIn(300);
    $("#resultadoForma").fadeOut(300);
   }
   $(document).ready(function(){
    generarCaptcha();
    $("#forma").validate({
     submitHandler : function(){
      var datos = $("#forma").formSerialize().split("&");
      var contra = datos[1].split("=");
      var datos_nuevos = datos[0] + '&pass=' + seguridad.encripta(contra[1]) + '&' + datos[3] + '&' + datos[4] + '&' + datos[5] + '&' + datos[6] + '&' + datos[7];
      $.post("_php_registrarUsuario.php?tipo=l5k9j4j2lt49qj02f", datos_nuevos, function(json){
       if(json.stat!="ok"){
        $.notifyBar({
         html: "Hubo un error: " + json.err + ".",
         delay: 3000,
         animationSpeed: "normal",
         jqObject: $("#notifVerde")
        });
       }
       else{
        $("#forma").fadeOut(300);
        $.notifyBar({
         html: "Gracias por registrarte! Checa tu correo en " + datos[3] + " y confirma tu cuenta.",
         delay: 4000,
         animationSpeed: "normal",
         jqObject: $("#notifVerde")
        });       
       }
      }, "json");
      
     },
     invalidHandler : function(){
      $.notifyBar({
       html: "Necesitas llenar todos los campos. Por favor corrije los errores marcados.",
       delay: 2300,
       animationSpeed: "normal",
       jqObject: $("#notifRojo")
      });
     },
     onkeyup: false,
     rules: {
      usuario: {
       required: true,
       minlength: 2,
       remote: {
        url: "_php_verificaDisponibilidad.php?tipo=nick",
        type: "get"
       }
      },
      pass: {
       required: true,
       minlength: 5
      },
      pass_checa: {
       required: true,
       minlength: 5,
       equalTo: "#pass"
      },
      email: {
       required: true,
       email: true,
       remote: {
        url: "_php_verificaDisponibilidad.php?tipo=email",
        type: "get"
       }
      },
      terminos: "required",
      nombre: "required",
      lastname1: "required",
      lastname2: "required",
      nacimiento: {
       required: true,
       date: true
      },
      captcha: {
       required: true,
       remote: {
        url: "__captchaVerifica.php",
        type: "post",
        data: {
         captcha_answer: function(){
          return $("#captcha_answer").val();
         },
         captcha_id: function(){
          return capid;
         }
        }
       }
      }
     },
     messages: {
      nombre: "Ingresa tu nombre",
      lastname1: "Ingresa tu apellido paterno",
      lastname2: "Ingresa tu apellido materno",
      usuario: {
       required: "Ingresa un nombre de usuario",
       minlength: "El usuario debe contener mínimo 2 caracteres",
       remote: "El usuario ya existe. Escoje otro."  
      },
      pass: {
       required: "Debes asignar una contraseña",
       minlength: "La contraseña debe ser mínimo de 5 caracteres"
      },
      pass_checa: {
       required: "Debes asignar una contraseña",
       minlength: "La contraseña debe ser mínimo de 5 caracteres",
       equalTo: "Ingresa la misma contraseña de arriba"
      },
      email: {
       required: "Ingresa un correo electrónico",
       email: "Debes ingresar un correo electrónico válido",
       remote: "El correo electrónico ya está registrado. Ingresa otro"
      },
      terminos: "Debes aceptar los términos y condiciones",
      nacimiento: "Debes ingresar la fecha de nacimiento (dd/mm/aaaa)",
      captcha: "Ingresa la clave que aparece en la imagen. Para generar una imagen nueva, da clic sobre ella.'"
     }
    });
    
    $("#pass").blur(function() {
     $("#pass_checa").valid();
    });
    
    $("#ingreso").validate({
     submitHandler : function(){
      $("#resultadoLogin").html('conectando...');
      $("#resultadoLogin").fadeIn(100);
      var datos = $("#ingreso").formSerialize().split("&");
      var contra = datos[1].split("=");
      var todos = datos[0] + "&login_pass=" + seguridad.encripta(contra[1]);
      $.post("_php_login.php?clam=aGACAEioj234kjlkRFADf32kj329rjlAFfw32", todos, function(json){
       if(json.stat=="ok"){
        $("#ingreso").fadeOut(300);
        $("#resultadoLogin").html('<h2>Bienvenido '+ json.nombre + ' ' + json.apellido +'</h2>'
        + '<p>Tu último inicio de sesión fue el ' + json.fecha + '</p>'
        + '<p><a href="#">Clic aquí para salir</a></p>');
        $("#resultadoLogin").fadeIn(300);
       }
       else{
        var mensaje = "";
        switch(json.err){
         case "missingMysqlConnect" : mensaje = "No se conectó a la base de datos";
         break;
         case "usuarioNoExiste" : mensaje = "No existe el usuario o el correo electrónico";
         break;
         case "emailNotFound" : mensaje = "No se encontró el correo. Contacte al administrador.";
         break;
         case "emailTimestampNotFound" : mensaje = "Hubo un error grave. Contacte al administrador";
         break;
         case "verifyEmail" : mensaje = "Se te envió un nuevo correo electrónico de confirmación. Por favor revísalo y confirma tu correo.";         break;
         case "verifySentEmail" : mensaje = "El correo aún no ha sido verificado, por favor revise en su bandeja. Cuide que no esté en la carpeta de correo no deseado.";
         break;
         case "passwordNotMatch" : mensaje = "La contraseña no coincide";
         break;
         case "fatal:missingPasswordField" : mensaje="Hubo un error grave. Contacte al administrador";
         break;
         case "userNotMatch" : mensaje = "El usuario no coincide.";
         break;
         case "paramsNotMatch" : mensaje = "Los parámetros no coinciden.";
         break;
         case "missingParams" : mensaje = "Faltan los parámetros.";
         default: mensaje = "Ocurrió un error grave y desconocido. Contacte al administrador.";
         break;
        }
        $.notifyBar({
         html: "Ocurrió un error: " + mensaje,
         delay: 2000,
         animationSpeed: "normal",
         jqObject: $("#notifRojo")
        });
        $("#resultadoLogin").fadeOut(100);
       }
      }, "json");
     },
     rules : {
      login_usuario : {
       required : true
      },
      login_pass : {
       required : true
      }
     },
     messages : {
      login_usuario : "Debes ingresar el usuario o el e-mail.",
      login_pass : "Debes ingresar la contraseña"
     }
    });

   });
  
  </script>
 </body>
</html>
Creative Commons License
Formas de registro y acceso usando jQuery by Luis Pulido is licensed under a Creative Commons Attribution-Share Alike 2.5 Mexico License.
Based on a work at luispulido.com.
Permissions beyond the scope of this license may be available at http://twitter.com/pulidoman.
luispulido.comprofiletwitterblog