Ejercicio: Ejercicio 2: Validar un campo de contraseña
Validar un campo de contraseña cuando dejamos de hacer focus en elSolución:
<body>
<div x-data="main()">
<label for="password">Contraseña:</label>
<input type="password" id="password" x-model="password" @blur="validatePassword()">
<p x-show="error" x-text="mensaje"></p>
</div>
<script>
function main() {
return {
password: '',
error: false,
mensaje: '',
validatePassword: function () {
if (this.password.length < 8 || !/\d/.test(this.password)) {
this.mensaje = 'La contraseña debe tener al menos 8 caracteres y contener al menos un número'
this.error = true;
} else {
this.error = false;
}
}
}
}
</script>
</body>En este ejercicio, estamos utilizando la directiva x-model para enlazar el valor del campo de contraseña a la variable password. A continuación, estamos utilizando la directiva @blur para validar la contraseña cuando el campo pierde el enfoque. En la función validatePassword, estamos utilizando expresiones regulares para validar que la contraseña tenga al menos 8 caracteres y contenga al menos un número. Si la contraseña no cumple con estos requisitos, establecemos la variable error en verdadero y mostramos el mensaje de error.