Hola, mi resultado para el ejercicio es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="get" name="formulario" onsubmit="validar()">
<label>Introduzca su nombre</label>
<input type="text" id="nombre" size="20"/><br/>
<label>Introduzca su apellido</label>
<input type="text" id="apellido" size="20"/><br/>
<label>Introduzca su email</label>
<input type="text" id="email" size="50"/><br/>
<input type="submit" value="submit" />
<input type="reset" value="Reiniciar datos" />
</form>
<script>
var contador=0;
function validar(){
validarNombre();
validarApellido();
validarEmail();
validarOk();
}
function validarNombre(){
var nombre=document.getElementById("nombre").value;
var expresionRegular=/^\w{3,}$/;
if (!(expresionRegular.test(nombre))){
alert ("Ha introducido los datos de nombre mal. Deberá indicar un nombre superior a tres letras");
}
else {
contador++;
}
}
function validarApellido(){
var apellido=document.getElementById("apellido").value;
var expresionRegular=/^\w{3,}$/;
if (!(expresionRegular.test(apellido))){
alert ("Ha introducido los datos de apellido mal. Deberá indicar un apellido superior a tres letras");
}
else {
contador++;
}
}
function validarEmail(){
var email=document.getElementById("email").value;
email=convertirMinusculas(email);
email=comprobarAtEmail(email);
if( !(/^([\w-\.]{3,}\@.+\..+)$/.test(email)) ) {
alert ("Le recordamos condiciones que debe cumplir su correo electronico:\n\t 1.Su nombre ha de tener almenos 3 caracteres(alfanumericos o el subrayado)\n\t 2.Debe contener la '@' ");
}
else {
contador++;
}
}
function validarOk(){
if (contador==3){
alert ("Introdujo todos los valores correctamente y su formulario será enviado");
}
}
function convertirMinusculas(email){
return email.toLowerCase();
}
function comprobarAtEmail(email){
var expresion=/\sat\s/g;
return email.replace(expresion,'@');
}
</script>
</body>
</html>
Además quería comentar, que podriamos usar en este ejercicio muchos atributos nuevos que salieron con HTML5, podriamos haber añadido el atributo required para obligar al usuario a que rellenase los campos, además para el email podriamos añadir type="email", una ayuda que facilitaria al usuario introducir los campos es añadir placeholder="descripcion del campo". También podemos añadir dentro de input la expresion regular, en el caso de nombre y apellido podriamos poner pattern="[A-Za-z]{3,}".
Tengo una cuestión, que estoy planteandome que no sé si es correcto mi idea para hacer una verificiacion sincrona de los formularios. Quiero que cada campo cada vez que sea rellenado y se cambie a otros campo se verifique(si es correcto aparezca un tic de correcto y si no lo es una cruz de incorrecto).Estaba pensando en utilizar el evento onfocusout para que cada vez que se cambien de campo se verifique, ¿sería correcto el planteamiento?
Otra cosa que me ha parecido muy comodo para la verificación de formularios es el poder cambiar el mensaje de verificación con setCustomValidity().
Saludos.
Tema: Validar formularios con JavaScript expresiones regulares y HTML5 CU01155E (Leído 3409 veces)
RSS -
WAP2