7.3. Validación

O uso principal de JavaScript na xestión dos formularios é a validación dos datos introducidos polos usuarios. Antes de enviar un formulario ao servidor, recoméndase validar os datos inseridos polo usuario a través de JavaScript. Deste xeito, se o usuario realizou un erro ao cubrir o formulario, pódese notificar instantáneamente, sen necesidade de esperar a resposta do servidor.

Notificar os erros de inmediato usar JavaScript mellora o usuario Satisfacción coa aplicación (que é tecnicamente coñecida como “Mellorar a experiencia do usuario”) e axuda a reducir a carga de procesamento no servidor.

Normalmente, a validación dun formulario consiste en chamar a unha función de validación cando o Fai clic no botón Enviar o botón. Nesta función, están marcados se os valores que o usuario entrou cumprindo as restricións impostas pola aplicación.

Aínda que hai tantos comprobacións posibles como elementos de forma diferente, algúns cheques son moi comúns : que un campo obrigatorio, que se selecciona o valor dunha lista despregábel, que o enderezo de correo electrónico indicado é correcto, que a data introducida é lóxica, que un número se introduce como requirido, etc.

A continuación é o código básico de JavaScript necesario para incorporar a validación a un formulario: “742Ac076B5”>

e o esquema de función validacion() é o seguinte:

function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el último campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones // se han cumplido, por lo que se devuelve el valor true return true;}

O funcionamento desta técnica de validación baséase no comportamento de O evento onsubmit por javascript. Do mesmo xeito que outros eventos como onclick e onkeypress, o evento

varía o seu comportamento en función do valor que se devolve.

Así, se o evento onsubmit devolve o valor true, o formulario Enviar Como faría normalmente. Non obstante, se o evento onsubmit devolve o valor , o formulario non se envía. A clave para esta técnica é comprobar todos e cada un dos elementos do formulario. En cando se devolve un elemento incorrecto, o valor é devolto. Se non se atopan erros, devolve o valor true.

Polo tanto, o evento IV id = “19026ad6c7” está definido en primeiro lugar. da forma como:

onsubmit="return validacion()"

Como o código JavaScript devolve o valor resultante da función validacion(), o formulario só se enviará ao servidor se a función devolve a función true. No caso de que a función validacion() devolve , o formulario permanecerá insuficiente.

Dentro da función validacion() Todas as condicións impostas pola aplicación están marcadas. Cando non se cumpre unha condición, devolveuse e, polo tanto, o formulario non se envía. Se se alcanza ao final da función, todas as condicións foron cumpridas correctamente, polo que é devolto true e envíase o formulario.

A notificación de Os erros comprometidos dependen do deseño de cada aplicación. No código do exemplo anterior, as mensaxes simplemente amosan usando a función alert() que indica o erro producido. As mellores aplicacións web deseñadas mostran cada mensaxe de erro ao lado do elemento de formulario correspondente e tamén adoitan mostrar unha mensaxe principal que indica que o formulario contén erros.

Unha vez que o esquema de función está definido validacion(), debe engadirse o código correspondente a todos os controis realizados sobre os elementos do formulario a esta función. A continuación, algunhas das validacións máis comúns dos campos de formulario amósanse.

7.3.1. Validar un campo de texto obrigatorio

está a piques de forzar ao usuario a introducir un valor nunha tarxeta de texto ou texto en que é obrigatorio. A condición en JavaScript pode indicarse como:

para que un campo de texto obrigatorio sexa finalizado, comproba que o O valor introducido é válido, que o número de caracteres introducidos é maior que cero e que só se introduciron espazos en branco.

A palabra reservada null é un valor especial que se usa para indicar “sen valor”. Se o valor dunha variable é null, a variable non contén calquera valor de obxecto, matriz, numérica, cadea de texto ou booleano.

A segunda parte da condición require que o texto introducido teña unha lonxitude superior a cero caracteres, é dicir, que non é un texto baleiro.

Finalmente, a terceira parte do Condición (/^\s+$/.test(valor)) obriga o valor introducido polo usuario non só formado por espazos en branco. Este cheque está baseado no uso de “expresións regulares”, un recurso habitual en calquera linguaxe de programación pero que debido á súa gran complejidad non serán estudados. Polo tanto, só é necesario copiar literalmente esta condición, tendo coidado especial para non modificar calquera carácter da expresión.

7.3.2. Validación dun campo de texto con valores numéricos

Trátase de unir ao usuario para introducir un valor numérico nunha caixa de texto. A condición de JavaScript consta de:

valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}

Se o contido da variable valor Non é un número válido, a condición non se cumpre. A vantaxe de usar a función interna isNaN() é que simplifica os cheques, xa que Javascript é responsable de ter en conta os decimais, signos, etc.

a continuación algúns Resultados da función isNaN():

isNaN(3); // falseisNaN("3"); // falseisNaN(3.3545); // falseisNaN(32323.345); // falseisNaN(+23.2); // falseisNaN("-23.2"); // falseisNaN("23a"); // trueisNaN("23.43.54"); // true

7.3.3 móstranse. Valida que se selecciona unha opción a partir dunha lista

, trátase de vincular ao usuario para seleccionar un elemento dunha lista despregable. O seguinte código JavaScript permítelle alcanzalo:

indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false;}<select name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>

da propiedade selectedIndex Comproba se o índice da opción seleccionada é válido e tamén é diferente de cero. A primeira opción na lista (- Selecciona un valor –) non é válida, polo que o valor está permitido para esta propiedade selectedIndex.

7.3.4. Validar un enderezo de correo electrónico

Trátase de unir ao usuario que introduza un enderezo de correo electrónico cun formato válido. Polo tanto, o que está marcado é que a dirección parece válida, xa que non está marcada se é unha conta de correo electrónico real e operativo. A condición de JavaScript consta de:

valor = document.getElementById("campo").value;if( !(/\w+(\w+)*@\w+(\w+)*\.\w+(\w+)/.test(valor)) ) { return false;}

Comproba de novo as expresións regulares, xa que os enderezos de correo electrónico válidos poden ser moi diferentes. Doutra banda, como o estándar que define o formato dos enderezos de correo electrónico é moi complexo, a expresión regular anterior é unha simplificación. Aínda que esta regra valida a maioría dos enderezos de correo electrónico utilizados polos usuarios, non soporta todos os diferentes formatos de correo electrónico válidos.

7.3.5. Validar unha data

As datas adoitan ser os campos de forma máis complicados para validar a multitude de formas diferentes nas que se poden introducir. O seguinte código supón que o ano foi obtido dalgún xeito, o mes eo día introducido polo usuario:

var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}

A función Date(ano, mes, dia) é unha función interna de JavaScript que permite construír datas do ano, o mes e a data da data. É moi importante ter en conta que o número do mes está indicado a partir de a , sendo O mes de xaneiro e o mes de decembro. Os días do mes seguen unha numeración diferente, xa que o mínimo permitido é 1 e o máximo 31.

A validación é tratar de construír unha data cos datos proporcionados polo usuario. Se os datos do usuario non son correctos, a data non pode ser construída correctamente e, polo tanto, a validación do formulario non será correcta.

7.3.6. Validar unha serie de DNI

Trátase de verificar que o número proporciona o usuario corresponde a un número válido de documento ou DNI de identidade nacional. Aínda que para cada país ou rexión os requisitos do documento de identidade das persoas poden variar, un exemplo xenérico facilmente adaptable que se mostra a continuación. A validación non só debe comprobar que o número está formado por oito cifras e unha carta, pero tamén é necesario verificar que a letra indicada é correcta para o número introducido:

valor = document.getElementById("campo").value;var letras = ;if( !(/^\d{8}$/.test(valor)) ) { return false;}if(valor.charAt(8) != letras) { return false;}

O primeiro cheque asegura que o formato do número introducido é correcto, é dicir, está formado por 8 números seguidos e unha carta. Se a carta está ao comezo dos números, o cheque sería /^\d{8}$/. Se en vez de oito números e unha letra, son necesarios dez números e dúas letras, o cheque sería /^\d{10}{2}$/ e así por diante.

A segunda verificación aplica o algoritmo de cálculo da letra do DNI e compárao coa carta proporcionada polo usuario. O algoritmo de cada documento de identificación é diferente, polo que esta parte da validación debe ser adaptada convenientemente.

7.3.7. Validar un número de teléfono

Os números de teléfono poden ser indicados de maneira moi diferente: con prefixo nacional, con prefixo internacional, agrupado por pares, separando números con scripts, etc.

o seguinte script considera que un número de teléfono consta de nove díxitos consecutivos e sen espazos ou scripts entre as cifras:

valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false;}

Unha vez máis, a condición de JavaScript está baseado no uso de expresións regulares, que comproban se o valor indicado é unha sucesión de nove números consecutivos. Abaixo amósanse outras expresións regulares que se poden usar para outros formatos de número de teléfono:

7.3.8. Valida que se seleccionou unha caixa de verificación

Se hai que seleccionar un elemento de caixa de verificación, JavaScript permítelle comprobar que é moi facilmente:

elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}

Se é para verificar que se seleccionou toda a caixa de verificación do formulario, é máis sinxelo usar un ciclo:

formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}

7.3.9. Validan que un radiobutton foi seleccionado

Aínda que é un caso similar ao da caixa de verificación, a validación do radiobutton presenta unha diferenza importante: en xeral, a verificación que se realiza é que o usuario ten Seleccionou algún radiobutton dos que forman un determinado grupo. Usando JavaScript, é fácil determinar se un grupo radiobutton foi seleccionado:

opciones = document.getElementsByName("opciones");var seleccionado = false;for(var i=0; i<opciones.length; i++) { if(opciones.checked) { seleccionado = true; break; }}if(!seleccionado) { return false;}

O exemplo anterior executa todo o radiobutón que Eles forman un grupo e comproban o elemento por elemento se foi seleccionado. Cando se atopa o primeiro radiobutton seleccionado, deixa o lazo e indícase que polo menos se seleccionou.