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

Imágen de perfil
Val: 1.954
Plata
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

Actualizado el 21 de Julio del 2019 por Xavi (541 códigos) (Publicado el 17 de Mayo del 2009)
33.014 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.321 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
5.695 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1797