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