En primer lugar, se crea el formulario de manera normal, usando las etiquetas HTML convencionales. En la página de ejemplo aparece el formulario cuyo código se lista a continuación:
<form method = "POST" name = "registro" onSubmit = "return validar(this)" action = "formularios.asp">
Nombre: <input type="text" name="nombre" size="20">
Edad: <input type="text" name="edad" size="2">
Dirección de correo: <input type="text" name="correo" size="20">
<input type="submit" value="Enviar datos" name="enviar">
</form>
que consta de tres campos de entrada y un botón para enviar los datos. Se ha añadido el evento onSubmit, que se produce cuando el usuario pulsa el botón Enviar datos, de manera que se invoca a la función validar antes de transmitir nada. El argumento que toma es this, es decir, el propio formulario. A continuación se presenta el código de dicha función:
function validar(formulario) {
if (formulario.nombre.value.length < 4) {
alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");
formulario.nombre.focus();
return (false);
}
var checkOK = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú ";
var checkStr = formulario.nombre.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++) {
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length) {
allValid = false;
break;
}
}
if (!allValid) {
alert("Escriba sólo letras en el campo \"Nombre\".");
formulario.nombre.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = formulario.edad.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++) {
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length) {
allValid = false;
break;
}
allNum += ch;
}
if (!allValid) {
alert("Escriba sólo dígitos en el campo \"Edad\".");
formulario.edad.focus();
return (false);
}
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= "18" && prsVal <= "30")) {
alert("Escriba un valor mayor o igual que 18 y menor o igual que 30 en el campo \"Edad\".");
formulario.edad.focus();
return (false);
}
if ((formulario.correo.value.indexOf ('@', 0) == -1)||(formulario.correo.value.length < 5)) {
alert("Escriba una dirección de correo válida en el campo \"Dirección de correo\".");
return (false);
}
return (true);
}
Esta función realiza las siguientes comprobaciones:
-La longitud del nombre es mayor de cuatro caracteres.
-El nombre sólo contiene caracteres del alfabeto español, no contiene
números ni caracteres no alfanuméricos.
La edad sólo contiene números.
El valor de la edad está comprendido entre 18 y 30.
La dirección de correo incluye una arroba y su longitud es superior a cinco caracteres.
