Uno de los usos más importantes de javascript es la validación de formularios de parte del cliente. Existen gran cantidad de plugins para distintos Frameworks, tales como jQuery, Mootools, Prototype …
Supongamos que queremos validar un formulario de una manera simple, por ejemplo, que en el teléfono no se puedan escribir caracteres o que en la ciudad no se pueda escribir dígitos, sería un poco desproporcionado tener que añadir una librería y un plugin sólo para este proposito, por lo que vamos a explicar, la manera de controlar lo que el usuario tiene permitido introducir en un formulario con javascript nativo.
Lo primero que vamos a hacer, es definir la función javascript, por ejemplo, si queremos especificar un campo que sólo admita números, crearíamos la siguiente función (entre las etiquetas <head> </head>):
<script type="text/javascript">
function solonumeros(e) {
tecla = (document.all)?e.keyCode:e.which;
if (tecla==8) return true;
patron = /\d/;
te = String.fromCharCode(tecla);
return patron.test(te);
}
</script>
Ahora habría que especificar que campos queremos que admitan solo números de la siguiente manera:
<input type="text" name="textfield" onkeypress="return solonumeros(event)">
Para especificar una nueva regla de validación, lo especificaremos cambiando la regla en patron = /\d/;
En la tabla que sigue se muestran los caracteres comodín usados para crear los patrones y su significado, junto a un pequeño ejmplo de su utilización:
| Significado | Ejemplo | Resultado | |
\ |
Marca de carácter especial |
/\$ftp/ |
Busca la palabra $ftp |
^ |
Comienzo de una línea |
/^-/ |
Líneas que comienzan por - |
$ |
Final de una línea |
/s$/ |
Líneas que terminan por s |
. |
Cualquier carácter (menos salto de línea) |
/\b.\b/ |
Palabras de una sóla letra |
| |
Indica opciones |
/(L|l|f|)ocal/ |
Busca Local, local, focal |
( |
Agrupar caracteres |
/(vocal)/ |
Busca vocal |
[ |
Conjunto de caracteres opcionales |
/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 |
/l*234/ |
Valen 234, 1234, 11234... |
+ |
Repetir 1 o más veces |
/a*mar/ |
Valen amar, aamar, aaamar... |
? |
1 o 0 veces |
/a?mar/ |
Valen amar, mar. |
{n} |
Exactamente n veces |
/p{2}sado/ |
Vale ppsado |
{n,} |
Al menos n veces |
/(m){2}ala/ |
Vale mmala, mmmala.... |
{m,n} |
entre m y n veces |
/tal{1,3}a/ |
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 (.) |
| \s | Carácter tipo espacio (como tab) | /\sSi\s/ | Encuentra Si en “Digo Si “, pero no en “Digo Sientate” |
| \S | Opuesto a \s | ||
| \cX | Carácter de control X | \c9 | El tabulador |
| \oNN | Carácter octal NN | ||
| \xhh | El hexadecimal hh | /\x41/ | Encuentra la A (ASCII Hex41) en “letra A” |
Información Bitacoras.com…
Valora en Bitacoras.com: Uno de los usos más importantes de javascript es la validación de formularios de parte del cliente. Existen gran cantidad de plugins para distintos Frameworks, tales como jQuery, Mootools, Prototype … Supongamos que quere……