Com implementar la validació de formulari del client amb JavaScript

Com implementar la validació de formulari del client amb JavaScript

JavaScript és un dels llenguatges de programació més populars i versàtils amb què podeu començar avui. Es diu que aquest llenguatge de programació és el llenguatge del web i és essencial per afegir interactivitat als vostres llocs web.





L'element de formulari és un dels elements HTML més utilitzats als llocs web. Aquests formularis prenen l’entrada de l’usuari i el processen al navegador o al servidor. Tot i això, és important validar aquestes entrades per solucionar problemes de seguretat i errors no desitjats.



Comprensió de la manipulació del DOM

Abans de procedir a implementar la validació de formularis del costat del client amb JavaScript, és essencial entendre el model d’objectes de document, conegut habitualment com a 'DOM'. El DOM és una API estandarditzada que permet a JavaScript interactuar amb elements d’una pàgina web HTML.





Més informació: L'heroi ocult dels llocs web: entendre el DOM

Per afegir oients d'esdeveniments i recuperar entrades d'usuari, haureu d'entendre els conceptes bàsics de la manipulació del DOM. Aquí teniu un exemple que explica com podeu canviar el contingut de la pàgina web mitjançant l'API DOM i JavaScript:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

Al codi anterior, el fitxer

té un identificador de paràgraf . Mentre escriviu el codi JavaScript, podeu accedir a aquest element trucant a document.getElementById ('paràgraf') mètode i manipulant-ne el valor.

Ara que ja heu entès els conceptes bàsics de la manipulació de DOM, anem endavant i implementem la validació de formularis.



Validació de formularis amb JavaScript

Hi ha diversos tipus d’entrades que podeu obtenir d’un usuari. El tipus de text, el tipus de correu electrònic, el tipus de contrasenya, els botons d’opció i les caselles de selecció són alguns dels més habituals que podeu trobar. A causa d’aquesta gran majoria de tipus d’entrada, haureu d’utilitzar una lògica diferent per validar cadascun d’ells.

Abans d’endinsar-nos en la validació, dediquem un moment a comprendre els formularis HTML i la seva importància. Els formularis HTML són una de les maneres principals d’interactuar amb el lloc web, ja que us permeten introduir les vostres dades, aplicar canvis, invocar finestres emergents, enviar informació a un servidor i molt més.



el gestor de tasques ha estat desactivat per l'administrador de Windows 10

L'HTML element s’utilitza per crear aquests formularis orientats a l’usuari. A continuació s’explica com podeu validar les entrades d’un formulari HTML:

1. Validació del correu electrònic

Tant si esteu construint un sistema d’autenticació com si només esteu recopilant correus electrònics d’usuaris per al vostre butlletí, és important validar el correu electrònic abans de poder emmagatzemar-lo a la base de dades o processar-lo. Per comprovar si un correu electrònic compleix totes les condicions requerides, podeu utilitzar un Expressió normal .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Validació de contrasenya

Les contrasenyes són una dada crucial que necessita un tipus de validació especial per garantir-ne la seguretat. Penseu en un formulari d’inscripció que tingui dos camps: contrasenya i camps de confirmació de contrasenya. Per validar aquest parell d’entrades, aquí teniu algunes coses que hauríeu de tenir en compte:

  • La contrasenya ha de tenir més de 6 caràcters.
  • El valor de la contrasenya i el camp de confirmació de la contrasenya han de ser els mateixos.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Validació d'entrada de ràdio

L’entrada de ràdio HTML és un tipus especial d’element de control gràfic que permet a l’usuari triar només una d’un conjunt predefinit d’opcions mútuament excloents. Un cas d’ús comú d’aquesta entrada seria la selecció de gènere. Per validar aquesta entrada, haureu de comprovar si almenys una d'elles està seleccionada.

Això es pot aconseguir utilitzant el fitxer operadors lògics com ara AND ( && ) i no ( ! ) operador d'aquesta manera:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Seleccioneu Validació d'entrada

El L’element HTML s’utilitza per crear una llista desplegable. El etiquetes dins del fitxer element defineix les opcions disponibles a la llista desplegable. Cadascun d’aquests les etiquetes tenen un atribut de valor associat.

aplicació per veure pel·lícules de forma gratuïta

Per a l'opció predeterminada o inicial, podeu establir el seu valor com una cadena buida de manera que es consideri una opció no vàlida. Per a totes les altres opcions, definiu un atribut de valor adequat. Aquí teniu un exemple de com podeu validar un fitxer element d'entrada:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

és segur comprar des de
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Validació de la casella de selecció

Els elements d'entrada de la casella de selecció de tipus es representen per defecte com a caselles que es marquen o es marquen quan s'activa. Una casella de selecció permet seleccionar valors únics per enviar-los en un formulari. Les caselles de selecció són una opció popular per a l'entrada 'Acceptar termes i condicions'.

Per esbrinar si una casella de selecció està marcada o no, podeu accedir a l'atribut marcat a l'entrada de la casella de selecció. Aquí teniu un exemple:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

La prevenció és millor que la cura

Sempre es recomana validar totes les aportacions que rep d'un visitant per proporcionar una experiència segura. Els pirates informàtics sempre intenten introduir dades malicioses als camps d’entrada per realitzar atacs de scripts entre llocs i injeccions SQL.

Ara que enteneu com validar les vostres entrades HTML, per què no proveu-ho creant un formulari i implementant les estratègies que heu vist més amunt?

Compartir Compartir Tweet Correu electrònic Com es crea un formulari en HTML

Permeteu als vostres usuaris introduir dades als vostres llocs web amb formularis HTML.

Llegiu a continuació Temes relacionats
  • Programació
  • HTML
  • JavaScript
  • Desenvolupament web
  • Tutorials de codificació
Sobre l'autor Nitin Ranganath(31 articles publicats)

Nitin és un àvid desenvolupador de programari i estudiant d’enginyeria informàtica que desenvolupa aplicacions web mitjançant tecnologies JavaScript. Treballa com a desenvolupador web independent i li agrada escriure per a Linux i Programació en el seu temps lliure.

Més de Nitin Ranganath

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us