Los distintos códigos explicados
<script type="text/javascript" src="overlib.js"></script>
Este script habilita el archivo 'overlib.js' de Erik Bosrup, que permite mostrar explicaciones emergentes (tooltips) al pasar el mouse sobre un elemento.
<link rel="shortcut icon" href="AM.ico" type="image/x-icon">
Esta etiqueta nos permite colocar un icono personalizado en la pestaña del navegador.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Esta metaetiqueta declara la codificación de caracteres UTF-8, permitiendo mostrar correctamente acentos y otros caracteres especiales.
Función validarEmail
<script>
function validarEmail(elemento){
var texto = document.getElementById(elemento.id).value;
var regex = /^(([^<>()[\]\.,;:áéíóú\s@\"]+(\.[^<>()[\]\.,;: \s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
if (!regex.test(texto)) {
document.getElementById("resultado").value = "Correo invalido";
} else {
document.getElementById("resultado").value = "Correo a Confirmar";
}
}
</script>
Esta función valida el formato de un email usando una expresión regular (regex). Si el formato no es válido, muestra "Correo inválido" en el campo de resultado.
Función validar_textob
<script>
function validar_textob(e){
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8){
return true;
}
patron =/[A-Z_@.a-z0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
}
</script>
La función 'validar_textob(e)' solo permite escribir en el campo de email: letras mayúsculas, minúsculas, guión bajo, arroba, punto y números del 0 al 9, además de la tecla retroceso.
Función validar_textoa
<script>
function validar_textoa(e){
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8){
return true;
}
patron =/[A-Z a-z 0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
}
</script>
La función 'validar_textoa(e)' solo permite escribir en el campo de contraseña: letras mayúsculas, minúsculas, espacio en blanco y números del 0 al 9, además de la tecla retroceso.
Función validar_textoc
<script>
function validar_textoc(e){
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8){
return true;
}
patron =/[a-z0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
}
</script>
La función 'validar_textoc(e)' no permite escribir letras mayúsculas ni espacios en blanco, solo minúsculas y números.
Pregunta Juan el pregunton: ¿Por qué?
Porque muchos servidores no aceptan palabras con mayúsculas, y los espacios en blanco los interpretan como '%20'. Entonces cuando el usuario coloque su nombre, el programa NO lo va a encontrar si usa mayúsculas o espacios.
Función TestaVal
<script>
function TestaVal() {
valor = document.getElementById("campo").value;
valor1 = document.getElementById("campo1").value;
valor2 = document.getElementById("email").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
alert ("Por favor colocá un Nombre de Usuario válido");
document.formulario.nombre.focus();
document.formulario.nombre.select();
return false;
}
else if( valor1 == "" || valor.length == 0 || /^\s+$/.test(valor1) ) {
alert ("Por favor colocá letras y/o números en CONTRASEÑA");
document.formulario.password.focus();
document.formulario.password.select();
return false;
}
else if( valor2 == "" || valor.length == 0 || /^\s+$/.test(valor2) ) {
alert ("Por favor colocá letras y/o números en E-Mail");
document.formulario.email.focus();
document.formulario.email.select();
return false;
}
else {
return true
}
}
</script>
Esta función valida que el usuario no deje ningún campo de texto vacío al enviar el formulario. Si algún campo está vacío, muestra una alerta y enfoca el campo correspondiente.
Función arranque
<script language="JavaScript">
function arranque()
{
document.formulario.nombre.focus();
}
</script>
Este script hace que al cargar la página, el elemento "nombre" (caja de texto Nombre de Usuario) tome el foco del cursor.
Implementación en el formulario
<body onLoad="arranque()">
<h2>Como Registrar y Guardar datos de un Usuario</h2>
<h4>Vamos a crear una cuenta de Usuario verdadera</h4>
<table width="553" border="0">
<form action="crearcuenta.php" method="post" name="formulario" onSubmit="return TestaVal()" >
<tr>
<td width="157">Nombre de Usuario</td>
<td width="251">
<input type="text" name="nombre" id="campo" size="40" maxlength="100"
onKeyPress="return validar_textoc(event)" placeholder="Sin mayusculas ni espacios en blanco">
</td>
<td width="222"></td>
</tr>
<tr>
<td>E-mail </td>
<td>
<a href="#" onMouseOver="return overlib('Escriba su E-Mail y CLCK en el Icono Crear');" onMouseOut="return nd();">
<input type="text" name="email" size="40" id="email" maxlength="100"
placeholder="Correo Electrónico" onkeyup="validarEmail(this)" onKeyPress="return validar_textob(event)">
</a>
</td>
<td>
<input type='text' id="resultado" name="resultado" size="20"
style="background: url(borralinea1.ico); background-repeat:no-repeat; background-color:transparent;
outline: none; bottom: 2px; padding: 2px; top:2px; position: relative; border: 0px;
width: 180px; font-size:14px; font-style:oblique; color: #F00; width:auto"/>
</td>
</tr>
<tr>
<td>Contraseña</td>
<td>
<input type="text" name="password" id="campo1" size="40" maxlength="60" placeholder="Escriba su ID"
onKeyPress="return validar_textoa(event)" >
</td>
<td></td>
</tr>
<tr>
<td>
<input type="submit" Style="font-family:Arial; font-size:24; color:black;" value="Enviar Datos" />
</td>
<td></td>
<td></td>
</tr>
</form>
</table>
Este código muestra cómo se implementan las funciones JavaScript en el formulario HTML. Cada campo llama a las funciones de validación correspondientes mediante eventos como onKeyPress, onkeyup y onSubmit.