Código de JavaScript - Formulario para cambiar la contraseña

Imágen de perfil
Val: 2.143
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Formulario para cambiar la contraseñagráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 21 de Julio del 2019 por Xavi (Publicado el 17 de Mayo del 2009)
29.579 visualizaciones desde el 17 de Mayo del 2009
Código de ejemplo que muestra el código para validar la nueva contraseña en un formulario para cambiarla. Valida que tenga un tamaño mínimo de 6 caracteres y que contenga números y letras.

contrasena

Versión 1
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 17 de Mayo del 2009gráfica de visualizaciones de la versión: Versión 1
27.201 visualizaciones desde el 17 de Mayo del 2009

Versión 2

Publicado el 21 de Julio del 2019gráfica de visualizaciones de la versión: Versión 2
2.379 visualizaciones desde el 21 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <title>Validar Contraseña</title>
    <meta charset="utf-8">
 
    <style>
    .error {color:red;}
    form {width:400px;font-family:Arial;}
    form input {font-family:Arial;}
    form>div {margin:5px;}
    form>div:last-child {text-align:center;margin-top:10px;}
    </style>
 
    <script>
    /**
     * Function que inserta un error por encima del elemento recibido
     * @param element -> texto que haga referencia al elemento
     * @param error -> texto del error
     */
    const showError = (element, error) => {
        const errorEl=document.createElement("div");
        errorEl.setAttribute("class","error");
        errorEl.innerHTML=error;
        document.querySelector(element).parentElement.prepend(errorEl);
    }
 
    const validatePassword = () => {
        //Cogemos los valores actuales del formulario
        const pasActual=document.formName.passwordActual.value;
        const pasNew1=document.formName.passwordNew1.value;
        const pasNew2=document.formName.passwordNew2.value;
 
        //Patron para los numeros
        const patron1=new RegExp("[0-9]+");
        //Patron para las letras
        const patron2=new RegExp("[a-zA-Z]+");
 
        // Eliminamos los posible errores
        for (let el of document.querySelectorAll("div[class=error]")) {
            el.remove();
        }
 
        if (pasNew1!=pasNew2 || pasNew1.length<6 || pasActual=="" || pasNew1.search(patron1)<0 || pasNew1.search(patron2)<0) {
            if (pasActual=="") {
                showError("input[name=passwordActual]", "Indicar tu contraseña actual");
            }
            if (pasNew1.length<6) {
                showError("input[name=passwordNew1]", "La longitud mínima tiene que ser de 6 caracteres");
            } else if (pasNew1!=pasNew2) {
                showError("input[name=passwordNew1]", "La copia de la nueva contraseña no coincide");
            } else if (pasNew1.search(patron1)<0 || pasNew1.search(patron2)<0) {
                showError("input[name=passwordNew1]", "La contraseña tiene que tener numeros y letras");
            }
            return false;
        }
        return true;
    }
    </script>
</head>
 
<body>
 
<form name="formName" action="" method="POST" onsubmit='return validatePassword()'>
 
    <div>Password Actual: <input type="password" name="passwordActual"></div>
 
    <div>Nuevo Password: <input type="password" name="passwordNew1"></div>
    <div>Repite Password: <input type="password" name="passwordNew2"></div>
 
    <div><input type="submit" value="Modificar Password"></div>
</form>
 
</body>
</html>



Comentarios sobre la versión: Versión 2 (0)


No hay comentarios
 

Comentar la versión: Versión 2

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1797