En casi todos los sitios web modernos hemos visto una función de inicio de sesión y registro, que sin duda es un servicio importante tanto para el cliente como para el proveedor de servicios. Cuando un usuario se registra en un determinado sitio web, debe poner un nombre de usuario y una contraseña, para ingresar contraseñas, los sitios web les piden que ingresen una contraseña dos veces, esto es para la seguridad del usuario, ya sea que la contraseña ingresada sea la misma o no. . En este articulo. Crearemos una contraseña confirmada validando mediante HTML , CSS y javascript .
Enfoque: Haremos una tarjeta de inicio de sesión simple en la que habrá tres entradas, una para un nombre de usuario que podría ser cualquier cosa para este artículo, la segunda será para la contraseña y la tercera entrada será la contraseña confirmada. En primer lugar, escribiremos la contraseña tanto en la entrada de contraseña como en la entrada de confirmación de la contraseña, luego compararemos ambas entradas si son iguales o no, si la entrada es la misma, mostraremos «contraseña coincidente» justo debajo de la contraseña de confirmación. cuadro de entrada si la entrada no es la misma, mostraremos «usar la misma contraseña» en el color rojo para que el usuario escriba la misma contraseña.
A continuación se muestra la implementación del enfoque anterior.
HTML
<!DOCTYPE html>
<head>
<title>Confirm Password validation using javascript</title>
<style>
body {
margin: 0;
padding: 0;
background-color: rgb(50, 57, 78);
display: flex;
justify-content: center;
align-items: center;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(34, 34, 34);
height: 400px;
width: 300px;
margin-top: 15%;
border-radius: 10px;
box-shadow: 2px 4px 6px rgb(0, 0, 0);
}
.pass {
display: flex;
flex-direction: column;
}
.image h2 {
color: rgb(2, 149, 27);
font-size: 30px;
font-family: sans-serif;
margin-bottom: 50px;
}
.username input,
.pass input {
font-family: sans-serif;
margin-bottom: 20px;
height: 30px;
border-radius: 100px;
border: none;
text-align: center;
outline: none;
}
.submit_btn {
height: 30px;
width: 80px;
border-radius: 100px;
border: none;
outline: none;
background-color: rgb(0, 179, 95);
margin-top: 15px;
}
.submit_btn:hover {
background-color: rgba(0, 179, 95, 0.596);
color: rgb(14, 14, 14);
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="image">
<h2>GeeksforGeeks</h2>
</div>
<div class="username">
<input type="text"
name="username"
placeholder="Dummyuser">
</div>
<div class="pass">
<input id="pass"
type="password"
name="pass"
placeholder="Enter Password"
required"">
<input id="confirm_pass"
type="password"
name="confirm_pass"
placeholder="Confirm Password"
required
onkeyup="validate_password()">
</div>
<span id="wrong_pass_alert"></span>
<div class="buttons">
<button id="create"
class="submit_btn"
onclick="wrong_pass_alert()">
Submit
</button>
</div>
</div>
<script>
function validate_password() {
var pass = document.getElementById('pass').value;
var confirm_pass = document.getElementById('confirm_pass').value;
if (pass != confirm_pass) {
document.getElementById('wrong_pass_alert').style.color = 'red';
document.getElementById('wrong_pass_alert').innerHTML
= '☒ Use same password';
document.getElementById('create').disabled = true;
document.getElementById('create').style.opacity = (0.4);
} else {
document.getElementById('wrong_pass_alert').style.color = 'green';
document.getElementById('wrong_pass_alert').innerHTML =
'🗹 Password Matched';
document.getElementById('create').disabled = false;
document.getElementById('create').style.opacity = (1);
}
}
function wrong_pass_alert() {
if (document.getElementById('pass').value != "" &&
document.getElementById('confirm_pass').value != "") {
alert("Your response is submitted");
} else {
alert("Please fill all the fields");
}
}
</script>
</body>
</html>
Producción: