En este capítulo veremos como validar los campos de los formularios del lado del cliente con javascript, ejemplos como hacer que los campos sean requeridos, limitar el número mínimo y máximo de caracteres permitidos e incluir expresiones regulares a través del método match().
Código de ejemplo del capítulo ...
<!DOCTYPE HTML> <html> <head> <script> var validar = function() { var nombre = document.formulario.nombre; if (nombre.value == "") { document.getElementById("e_nombre").innerHTML = "El campo nombre es requerido"; return; } else if (nombre.value.length < 3 || nombre.value.length > 25) { document.getElementById("e_nombre").innerHTML = "El campo nombre debe contener entre 3 y 25 caracteres"; return; } else if (!nombre.value.match(/^[a-z]+$/i)) { document.getElementById("e_nombre").innerHTML = "El campo nombre sólo acepta letras a-zA-Z"; return; } else { document.getElementById("e_nombre").innerHTML = ""; } var email = document.formulario.email; if (email.value == "") { document.getElementById("e_email").innerHTML = "El campo email es requerido"; return; } else if (email.value.length < 6 || email.value.length > 80) { document.getElementById("e_email").innerHTML = "El campo email debe contener entre 6 y 80 caracteres"; return; } else if (!email.value.match(/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/)) { document.getElementById("e_email").innerHTML = "El formato de email no es correcto"; return; } else { document.getElementById("e_email").innerHTML = ""; } var password = document.formulario.password; if (password.value == "") { document.getElementById("e_password").innerHTML = "El password es requerido"; return; } else if (password.value.length < 8 || password.value.length > 16) { document.getElementById("e_password").innerHTML = "El password debe contener entre 8 y 16 caracteres"; return; } else if (!password.value.match(/^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i)) { document.getElementById("e_password").innerHTML = "El password debe contener letras y números"; return; } else { document.getElementById("e_password").innerHTML = ""; } var repetir_password = document.formulario.repetir_password; if (repetir_password.value == "") { document.getElementById("e_repetir_password").innerHTML = "El campo repetir password es requerido"; return; } else if(repetir_password.value != password.value) { document.getElementById("e_repetir_password").innerHTML = "El campo repetir password no coincide con password"; return; } else { document.formulario.submit(); } } window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { validar(); } } </script> </head> <body> <h1>Validar formulario</h1> <form method="post" name="formulario"> Nombre: <input type="text" name="nombre" placeholder="Introduce tu nombre"> <span id="e_nombre"></span><br> Email: <input type="email" name="email" placeholder="Introduce tu email"> <span id="e_email"></span><br> Password: <input type="password" name="password"> <span id="e_password"></span><br> Repetir password: <input type="password" name="repetir_password"> <span id="e_repetir_password"></span><br> <button type="button" id="btn">Enviar</button> </form> </body> </html>
No hay comentarios:
Publicar un comentario