Validación de contraseña en JavaScript [Explicación paso a paso de la configuración]

Cualquier sitio web que admita autenticación y autorización siempre solicita un nombre de usuario y una contraseña al iniciar sesión. Si no es así, el usuario debe registrarse y crear una contraseña para iniciar sesión en la próxima sesión y, por lo tanto, los sitios web tienden a proporcionar protocolos o parámetros específicos. Los siguientes parámetros se usan comúnmente para la validación de contraseñas en cualquier forma.

• Solo se aceptan entradas alfanuméricas en el campo de contraseña.
• Debe comenzar con el alfabeto en mayúsculas.
• Al menos una contraseña alfabética en mayúsculas.
• La contraseña debe tener una longitud específica.
• Se debe utilizar un valor numérico en la contraseña.
• La contraseña debe tener una longitud mínima y máxima.

La validación de contraseña en JavaScript garantiza que se sigan estos parámetros cuando el usuario crea una contraseña. Las condiciones dadas deben cumplirse para la formación de una contraseña razonablemente segura. La estructura de la contraseña se puede validar mediante una expresión regular utilizando código JavaScript.

Para procesar la validación de la contraseña usando JavaScript en el campo de la contraseña, se seguirán los pasos a continuación.

Validación de contraseña en Javascript

1. Crear un formulario HTML

El formulario debe tener campos básicos como correo electrónico, número de teléfono y contraseña. Veamos un ejemplo de código HTML para definir la estructura del formulario.

<! DOCTIPO html >

< html lang = “es” >

< cabeza >

< juego de caracteres meta = "UTF-8" >

< meta nombre = "ventana gráfica" contenido = "ancho = ancho del dispositivo, escala inicial = 1.0" >

< título > Formulario </ título >

</ cabeza >

< cuerpo >

< div clase = “contenedor” >

< acción de formulario = “/action_page.php” >

< label for = “usrname” > Dirección de correo electrónico </ label >

< tipo de entrada = "texto" id = "nombre de usuario" nombre = "nombre de usuario" requerido >

< etiqueta para = “psw” > Contraseña </ etiqueta >

< tipo de entrada = "contraseña" id = "psw" nombre = "psw" patrón = "(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “Debe contener al menos un número y una letra mayúscula y minúscula, y al menos 8 o más caracteres” requerido >

< tipo de entrada = "enviar" valor = "Enviar" >

</ formulario >

</ div >

< div id = "mensaje" >

< h3 > La contraseña debe contener lo siguiente: </ h3 >

< p id = “letra” clase = “inválido” > A < b > minúsculas </ b > letra </ p >

< p id = “mayúscula” clase = “inválido” > A < b > mayúscula (mayúscula) </ b > letra </ p >

< p id = “número” clase = “inválido” > A < b > número </ b ></ p >

< p id = “longitud” clase = “no válido” > Mínimo < b > 16 caracteres </ b ></ p >

</ div >

</ cuerpo >

</ html >

2. Agregar CSS

entrada {

ancho : 100% ;

relleno : 12px ;

borde : 1px sólido #ccc ;

borde-radio : 4px ;

tamaño de caja : cuadro de borde ;

margen superior : 6px ;

margen inferior : 16px ;

}

/* Aplica estilo al botón de enviar */

entrada [ tipo = enviar ] {

color de fondo : #4CAF50 ;

color : blanco ;

}

/* Estilo del contenedor para entradas */

.contenedor {

color de fondo : #f1f1f1 ;

relleno : 20px ;

}

#mensaje {

pantalla : ninguno ;

fondo : #f1f1f1 ;

color : #000 ;

posición : relativa ;

relleno : 20px ;

margen superior : 10px ;

}

#mensaje p {

relleno : 10px 35px ;

tamaño de fuente : 18px ;

}

.válido {

color : rgb ( 3 , 184 , 190 );

}

.válido:antes de {

posición : relativa ;

izquierda : -35px ;

contenido : “&#10004;” ;

}

.no válido {

color : rojo ;

}

.invalid:antes de {

posición : relativa ;

izquierda : -35px ;

contenido : “&#10006;” ;

}

Pago: Los mejores marcos de Javascript en 2021

3. Agregar JavaScript

var miEntrada = documento . getElementById ( "psw" );

var letra = documento . getElementById ( "letra" );

var capital = documento . getElementById ( "capital" );

número de var = documento . getElementById ( "número" );

var longitud = documento . getElementById ( "longitud" )

miEntrada . en foco = función () {

documento _ getElementById ( "mensaje" ). estilo _ mostrar = "bloquear" ;

}

miEntrada . onblur = función () {

documento _ getElementById ( "mensaje" ). estilo _ mostrar = "ninguno" ;

}

miEntrada . onkeyup = función () {

var letras en minúsculas = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

carta _ listaclases . eliminar ( "inválido" );

carta _ listaclases . añadir ( "válido" );

} más {

carta _ listaclases . eliminar ( "válido" );

carta _ listaclases . añadir ( "inválido" );

}

var letras mayúsculas = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

capital _ listaclases . eliminar ( "inválido" );

capital _ listaclases . añadir ( "válido" );

} más {

capital _ listaclases . eliminar ( "válido" );

capital _ listaclases . añadir ( "inválido" );

}

var números = / [ 0-9 ] / g ;

if ( myInput . value . match ( numbers )) {

número _ listaclases . eliminar ( "inválido" );

número _ listaclases . añadir ( "válido" );

} más {

número _ listaclases . eliminar ( "válido" );

número _ listaclases . añadir ( "inválido" );

}

if ( miEntrada . valor . longitud >= 8 ) {

longitud _ listaclases . eliminar ( "inválido" );

longitud _ listaclases . añadir ( "válido" );

} más {

longitud _ listaclases . eliminar ( "válido" );

longitud _ listaclases . añadir ( "inválido" );

}

}

El código JavaScript inicialmente obtiene un elemento por el id; después de eso, permite que se muestre en la pantalla. También ejecuta condiciones para obtener la contraseña en el formato dado. Los alfabetos en mayúsculas, minúsculas y números se validan a través de la expresión regular creada en código.

4. Expresiones regulares/REGEX

Las expresiones regulares son patrones para coincidir con la combinación original de literales pasados ​​en el campo. En la validación de contraseñas, el uso de la expresión regular de JavaScript juega un papel esencial en la identificación de la cadena y si está en el formato dado o no. Las expresiones regulares son objetos JavaScript. Estas expresiones regulares se escriben entre barras en el código JavaScript para la validación de la contraseña.

Ejemplo: let re=/ac-b/

¿Cómo escribir la validación de contraseña en JavaScript usando expresiones regulares?

Una expresión regular está formada por caracteres simples combinados con caracteres especiales. La expresión regular se forma de acuerdo con los parámetros o restricciones de una contraseña segura. Los caracteres especiales se utilizan cuando existe una coincidencia difícil de cadenas o caracteres.

El código JavaScript que se muestra arriba hizo uso de expresiones regulares para encontrar letras en mayúsculas, letras en minúsculas y números. La expresión se hace con diferentes secuencias y subsecuencias. Hay ciertas reglas para cada carácter que se usa en la expresión regular.

Ejemplo: sea número=/[0-9]/g. Acepta los números en el rango de 0-9.

Pago: Proyectos Javascript en Github

Aprenda cursos de software en línea de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Conclusión

La validación de la contraseña es crucial, ya que permite al usuario crear una contraseña segura y evita posibles desciframientos de contraseñas. Usando JavaScript, se puede agregar interactividad y, por lo tanto, notificar al usuario hasta que la contraseña tenga todos los caracteres requeridos en cualquier secuencia. La expresión regular codificada en JavaScript juega un papel clave en la definición de las secuencias. Reduce los parámetros escritos al código JavaScript.

Si está interesado en obtener más información sobre el desarrollo de pila completa, consulte el programa Executive PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones. , estado de exalumno de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.