Validación de formularios mediante Javascript (gen_validatorv4.js )
Anuncio
Validación de formularios mediante Javascript (gen_validatorv4.js )
Modo de utilización:
1. Incluir el archivo gen_validatorv4.js dentro de la etiqueta <head>…</head> en el archivo
.html que se quiere validar.
<head>
………
<script type = "text / javascript" src = "gen_validatorv4.js"> </script>
</head>
2. Después de la definición del formulario <form>…</form> se define una variable objeto al que
se le asigna una instancia a la clase Validator, definida dentro del archivo gen_validatorv4.js
(POO)
Esto es, se añade la instrucción:
<form>
………
</form>
<script type= “text/javascript>
var validarform = new Validator (formulario)
id ó name del formulario (<form…)
………
</script>
</body>
</html>
3. A continuación de la instrucción var validarform = new Validator (formulario) se añaden todas
las validaciones que se deseen usando la función addValidation(). La función addValidation()
tiene el formato:
addValidation (campo que se quiere validar, tipo de validación, [mensaje de error])
opcional
A un campo se puede aplicar ninguna, una ó varias validaciones.
Para usar la función addValidator hay que usar la variable definida en el apartado 2:
validarform.addValidation(…);
--- 00o00 --- --- 00o00 --EJEMPLO:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="gen_validatorv4.js"> </script>
</head>
<body>
<form action=" " id="formulario" >
Nombre:<input type="text" id="Nombre" name="Nombre"/><p
Apellido:<input type="text" id="Apellido" name="Apellido" /><p>
EMail:<input type="text" id="EMail" name="EMail"/><p>
Teléfono:<input type="text" id="Telefono" name="Telefono"/><p>
Dirección:<br>
<textarea cols="20" rows="5" id="Direccion" name="Direccion"></textarea></p>
País: <select id="Pais" name="Pais">
<option value="000" selected="selected">[Elige opción:]</option>
<option value="008">Albania</option>
<option value="012">Algeria</option>
<option value="016">American Samoa</option>
<option value="020">Andorra</option>
<option value="024">Angola</option>
<option value="660">Anguilla</option>
<option value="010">Antarctica</option>
<option value="028">Antigua And Barbuda</option>
<option value="032">Argentina</option>
<option value="051">Armenia</option>
<option value="533">Aruba</option>
</select><p>
<input type="submit" value="Enviar">
</form>
<script type="text/javascript">
var validarform = new Validator("formulario");
validarform.addValidation("Nombre","req","Por favor, introduzca su nombre");
validarform.addValidation("Nombre","maxlen=20","La longitud máxima para el nombre es 20");
validarform.addValidation("Apellido","req");
validarform.addValidation("Apellido","maxlen=20");
validarform.addValidation("Email","maxlen=50");
validarform.addValidation("Email","req");
validarform.addValidation("Email","email");
validarform.addValidation("Telefono","maxlen=50");
validarform.addValidation("Telefono","numeric");
validarform.addValidation("Direccion","maxlen=50");
validarform.addValidation("Pais","dontselect=000");
</script>
</body>
</html>
TABLA CON LOS TIPOS DE VALIDACIONES
TIPO VALIDACIÓN
USO
requerid ó
req
El campo no debe estar vacío.
Usado principalmente en campos o cajas de texto. Para listas desplegables,
checkbox y radio es más adecuado el uso 'dontselect' o 'selone_radio'…
maxlen =??? o
maxlength =???
Limita la longitud de la entrada.
Por ejemplo, si el tamaño máximo permitido es 25, se indica "maxlen = 25"
minlen =??? o
minLength =???
Comprueba la longitud de la cadena introducida respecto al mínimo requerido.
Ejemplo "minlen = 5"
alfanumeric ó
alnum
La entrada puede contener caracteres alfanuméricos.
(No se permiten espacios ni signos de puntuación)
alphanumeric_space
alnum_s
La entrada puede contener caracteres alfanuméricos y el carácter espacio.
num
numeric
Sólo se permiten números
alfa
alfabetic
Sólo se permiten caracteres alfabéticos (letras)
alphabetic_space
alpha_s
Se permiten caracteres alfabéticos (letras) y el carácter espacio.
email
Comprueba que el texto introducido sea una dirección de correo válida.
(No la validación no comprueba si existe la dirección de correo electrónico o no)
lt=???
lessthan=???
Verifique que el valor introducido sea menor que cierta cantidad.
Válido sólo para los campos numéricos.
Ejemplo: si el valor debe ser inferior a 1000, se indicaría "lt=1000"
gt=???
greaterthan=???
Verifique que el valor introducido sea mayor que cierta cantidad.
Válido sólo para los campos numéricos.
Ejemplo: si el valor debe ser mayor a 10, se indicaría "gt=10"
regexp=???
Hace coincidir la entrada con la expresión regular que se indique
Ejemplo: " regexp=^[A-Za-z]{1,20}$": 20 caracteres alfabéticos en mayúscula o
minúscula.
dontselect=??
Válido sólo listas desplegables.
Normalmente, las listas desplegable, contienen un valor con un texto del tipo:
“Seleccione uno”, “Elija opción”, etc…, que viene ya por por defecto
seleccionado. Con dontselect=?? se obliga al usuario que seleccione una opción
distinta a esa genérica que viene por defecto.
Es decir, tomando como ejemplo el formulario anterior:
Cuyo código es:
País: <select id="Pais" name="Pais">
<option value="000" selected="selected">[Elige opción:]</option>
<option value="008">Albania</option>
………
Indicando dontselect=”000” se obliga al usuario a elegir una opción que no sea
[Elige opción:], que es la que figura por defecto.
dontselectchk =??
Válido sólo para casillas tipo checkbox. El usuario no debe seleccionar la casilla
de verificación cuyo valor se indique.
Ejemplo (ver form_repaso.html):
<label><input type="checkbox" name="servicios" value="cocina">Cocina
</label>
No se debe seleccionar cocina: dontselectchk = cocina
dontselectradio =??
shouldselchk =??
Válido sólo para botones de radio.
Funcionamiento similar al tipo anterior (dontselectchk =??)
Válido sólo para casillas tipo checkbox. El usuario debe seleccionar la casilla de
verificación cuyo valor se indique.
Ejemplo (ver form_repaso.html):
<label><input type="checkbox" name="servicios" value="cocina">Cocina
</label>
Se debe seleccionar cocina: shouldselchk = cocina
selone
Debe seleccionar al menos una casilla de checkbox.
selmin=numero
Debe seleccionar al menos, como mínimo, el número de casillas de checkbox
que indique el valor "numero" (e.j. 2, 3, 4,…)
selmax=numero
Debe seleccionar, como máximo, el número de casillas de checkbox que indique
el valor "numero" (e.j. 2, 3, 4,…)
selone_radio
ó
selone
Debe seleccionar uno de los botones de radio (radio buttom)
Ejemplo (ver formulario2.html)
Finalizado: Sí <input type="radio" name="finalizado" value="si">
No <input type="radio" name="finalizado" value="no">
validarform.addValidation("finalizado","selone_radio");
COMPARAR DOS ELEMENTOS DE ENTRADA
Comparar dos elementos de entrada.
Por ejemplo: la contraseña y la confirmación de la contraseña.
eqelmnt =???
neelmnt =???
frmvalidator.addValidation ( "confpassword", "eqelmnt = contraseña", "La
contraseña confirmada no es la misma que la contraseña" );
El valor no debe ser igual al otro elemento de entrada.
Por ejemplo: el nombre de usuario y la contraseña.
frmvalidator.addValidation ( "password", "neelmnt = nombre de usuario", "La
contraseña no debe ser la misma que nombre de usuario" );
ltelmnt =???
leelmnt =???
gtelmnt =???
geelmnt =???
La entrada debe ser inferior a la otra entrada. El nombre de la otra entrada en
indica en la posición en que aparecen ???
La entrada debe ser menor que o igual a la otra entrada. El nombre de la otra
entrada en indica en la posición en que aparecen ???
La entrada debe ser mayor que la otra entrada. El nombre de la otra entrada en
indica en la posición en que aparecen ???
La entrada debe ser mayor que o igual a la otra entrada. El nombre de la otra
entrada en indica en la posición en que aparecen ???
--- 00o00 --- --- 00o00 ---
Sobre las expresiones regulares:
Las expresiones regulares constituyen un mecanismo para manipular cadenas de texto. Para
buscar un texto que responda a un cierto esquema, como por ejemplo: buscar aquellas palabras que
comienzan con http: y finalizan con una \, o buscar palabras que contengan una serie de números
consecutivos, etc.; es en estos casos cuando tenemos que utilizar las expresiones regulares.
La subcadena que buscamos en el texto es lo que se llama un patrón y se construye encerrando
entre dos barras inclinadas ( / ) una serie de caracteres normales y símbolos especiales llamados
comodines o metacaracteres. Este patrón es una descripción del texto que se está buscando y
JavaScript encontrará las subcadenas que concuerdan con ese patrón o definición.
En la tabla que sigue se muestran los caracteres comodín usados para crear los patrones y su
significado, junto a un pequeño ejemplo de su utilización.
Significado
\ Marca de carácter especial
^ Comienzo de una línea
$ Final de una línea
carácter (menos
. Cualquier
salto de línea)
| Indica opciones
(
Agrupar caracteres
)
[ Conjunto de caracteres
] opcionales
Ejemplo
Resultado
/\$ftp/
/^-/
/s$/
Busca la palabra $ftp
Líneas que comienzan por Líneas que terminan por s
/\b.\b/
Palabras de una sóla letra
/(L|l|f|)ocal/ Busca Local, local, focal
/(vocal)/
Busca vocal
/escrib[aoe]/
Vale escriba, escribo, escribe
La tabla que sigue describe los modificadores que pueden usarse con los caracteres que
forman el patrón. Cada modificador actúa sobre el carácter o el paréntesis inmediatamente anterior.
*
+
Descripción
Ejemplo
Resultado
Repetir 0 o más veces
Repetir 1 o más veces
/l*234/
/a*mar/
Valen 234, 1234, 11234...
Valen amar, aamar, aaamar...
?
{n}
{n,}
{m,n}
1 o 0 veces
Exactamente n veces
Al menos n veces
entre m y n veces
/a?mar/
/p{2}sado/
/(m){2}ala/
/tal{1,3}a/
Valen amar, mar.
Vale ppsado
Vale mmala, mmmala....
Vale tala, talla, tallla
Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no
imprimibles, como puedan ser el fín de línea o un tabulador, o grupos predefinidos de caracteres
(alfabéticos, numéricos, etc...)
Significado
Ejemplos
Resultado
\b
Principio o final de palabra
/\bver\b/
Encuentra ver en "ver de", pero no en "verde"
\B
Frontera entre no-palabras
/\Bver\B/
Empareja ver con "Valverde" pero no con"verde"
\d
Un dígito
/[A-Z]\d/
No falla en "A4"
\D
Alfabético (no dígito)
/[A-Z]\D/
Fallaría en "A4"
\O
Carácter nulo
\t
Caracter ASCII 9 (tabulador)
\f
Salto de página
\n
Salto de línea
\w
Cualquier alfanumérico,
[a-zA-Z0-9_ ]
/\w+/
Encuentra frase en "frase.", pero no el . (punto).
\W
Opuesto a \w
([^a-zA-Z0-9_ ])
/\W/
Hallaría sólo el punto (.)
Carácter tipo espacio (como tab)
/\sSi\s/
Encuentra Si en "Digo Si ", pero no en "Digo
Sientate"
\c9
El tabulador
/\x41/
Encuentra la A (ASCII Hex41) en "letra A"
\s
\S
Opuesto a \s
\cX
Carácter de control X
\oNN
Carácter octal NN
\xhh
El hexadecimal hh
Más información en el curso de JavaScript: http://www.javascriptya.com.ar/
Las expresiones regulares en ese curso se tratan en los capítulos que están en las páginas 8 y 9.
Otras direcciones:
Validar formularios en HTML5 sin necesidad de utilizar JavaScript:
http://www.programacion.com/articulo/validar_formularios_en_html_5_sin_la_necesidad_de_utilizar
_javascript_506
8 Excelentes plugins de jquery para validar formularios:
http://abreo.co/8-excelentes-plugins-de-jquery-para-validar-formularios/
