Duda en HTML - ¿Cómo validar Usuario y Contraseña al mismo tiempo?

Sazham · 22 Agosto 2013, 22:53 PM

Necesito ayuda para hacer un programa en html que pueda validar el usuario y la contraseña el mismo tiempo, el usuario y la contraseña tienen varios parámetros (tener mayúsculas, minusculas y números) entonces cuando se activa el botón tiene que ver si ambos cumplen con las especificaciones, ya tengo un botón que puede validar la contraseña pero necesito que haga ambos al mismo tiempo, acá les dejo el programa como lo tengo espero que alguien me pueda ayudar.

Código [Seleccionar]


<html>
 <head>
 <script>

   function valida(user){
   var expregular = /([A-Z+ a-z+ 0-9]{8})/;
   if (expregular.test(user)){
   alert ('Ingresando');
   } else {
   alert ('Error');
   }
   }

   function valida(pass){
   var expregular2 = /([A-Z+ a-z+ 0-9]{8})/;
   if (expregular2.test(pass)){
   alert ('Ingresando');
   } else {
   alert ('Error');
   }
   }

 </script>
 </head>

   <body bgcolor="#000000">
   <font color="#FFFFFF">

  <body>
  <form>
  <center>

   <label> Username: </label>
   <Input type= "Text" name = "user">
  <br>
   <label> Password: </label>
   <Input type= "Text" name = "pass">
  </br>
   <Input type= "Button" name= "BotonEntrar" Value="Entrar" onclick = "valida(pass.value)">

  </center>
  </form>
  </body>
</html>

Stakewinner00 · 22 Agosto 2013, 23:16 PM

Para validar usuarios no es nada recomendable usar javascript, es mejor usar lenguajes del lado del servidor como PHP. Si usas javascript todo el mundo con unos mínimos conocimientos podría entrar con un login correcto.

Sazham · 22 Agosto 2013, 23:24 PM

Cita de: Stakewinner00 en 22 Agosto 2013, 23:16 PM
Para validar usuarios no es nada recomendable usar javascript, es mejor usar lenguajes del lado del servidor como PHP. Si usas javascript todo el mundo con unos mínimos conocimientos podría entrar con un login correcto.

La verdad es solo para un proyecto que me dejaron en clase, no es que lo vaya a usar en la vida real.

Stakewinner00 · 22 Agosto 2013, 23:29 PM

Ok, no se mucho de javascript, pero no puedes probar a ejecutar una función que a su vez ejecute las otras dos funciones? Así podrás comprobar los dos campos con un click

Sazham · 22 Agosto 2013, 23:34 PM

Cita de: Stakewinner00 en 22 Agosto 2013, 23:29 PM
Ok, no se mucho de javascript, pero no puedes probar a ejecutar una función que a su vez ejecute las otras dos funciones? Así podrás comprobar los dos campos con un click

pues esa es exactamente mi pregunta hahaha.

Stakewinner00 · 22 Agosto 2013, 23:42 PM

te paso lo que hice que comprueba los dos de un click, haber si te sirve.

Código (html4strict) [Seleccionar]

<html>
   <head>
   <script>

         function validar(user){
         var expregular = /([A-Z+ a-z+ 0-9]{8})/;
         if (expregular.test(user)){
         alert ('Ingresando');
         } else {
         alert ('Error');
         }
         }

         function valida(pass){
         var expregular2 = /([A-Z+ a-z+ 0-9]{8})/;
         if (expregular2.test(pass)){
         alert ('Ingresando');
         } else {
         alert ('Error');
         }
         }
  
   function ejecuta(pass, user){
   valida(pass.value);
   validar(user.value);
   }
   
   </script>
   </head>
         <body bgcolor="#000000">
         <font color="#FFFFFF">
      <body>
      <form>
      <center>
         <label> Username: </label>
         <Input type= "Text" name = "user">
      <br>
         <label> Password: </label>
         <Input type= "Text" name = "pass">
      </br>
         <Input type= "Button" name= "BotonEntrar" Value="Entrar" onclick = "ejecuta(pass, user)">
      </center>
      </form>
      </body>
</html>

#!drvy · 22 Agosto 2013, 23:50 PM

Hola,

Las 2 funciones que tienes hacen exactamente lo mismo. ¿que sentido tiene?

Código (javascript) [Seleccionar]

function validar(){
   // Obtener valor de los elementos
   var user = document.getElementById('user').value;
   var password = document.getElementById('pass').value;
   // Las expresiones regulares
   var expregularUsuario = /([A-Z+ a-z+ 0-9]{8})/;
   var expregularPassword = /([A-Z+ a-z+ 0-9]{8})/;
   // Si tanto el usuario como la contraseñan pasan..
   if(expregularUsuario.test(user) && expregularPassword.test(password)){
      alert ('Ingresando');
   } else {
      alert ('Error');
   }
};

Código (html4strict) [Seleccionar]

<input type="text" name="user" id="user" />
<input type="text" name="pass" id="pass" />
<input type="button" name="BotonEntrar" value="Entrar" onclick="validar();" />

Saludos

Sazham · 23 Agosto 2013, 03:15 AM

Lo utilize de esta forma, gracias a todos por sus respuestas.

Código [Seleccionar]

<html>
   <head>
   <script type="text/javascript">

         function validar(user){
         var expregular = /(?=^.{8}$).*$/;
         if (expregular.test(user)){
         alert ('Ingresando');
         } else {
         alert ('Username Incorrecto');
         }
         }

         function valida(pass){
         var expregular2 = /(?=^.{8}$)(?=.*[0-9])(?=.*[% & # $])(?=.*[A-Z])(?=.*[a-z]).*$/;
         if (expregular2.test(pass)){
         alert ('Ingresando');
         } else {
         alert ('Password Incorrecto');
         }
         }

   </script>
   </head>

         <body bgcolor="#000000">
         <font color="#FFFFFF">

      <body>
      <form>
      <center>

         <label> Username: </label>
         <Input type= "Text" name = "user">
      <br>
         <label> Password: </label>
         <Input type= "Text" name = "pass">
      </br>
         <Input type= "Button" name= "BotonEntrar" Value="Entrar" onclick = "validar(user.value);valida(pass.value)">

      </center>
      </form>
      </body>
</html>

Stakewinner00 · 23 Agosto 2013, 10:53 AM

Sazham, creo que mejor sería implementar la solución de drvy con algun else if si quiere.

Principalmente por que no tiene lógica que si el user y la password es correcta te salga dos veces "Ingresado".