Home-theater-designers
JavaScript est l'un des langages de programmation les plus populaires et les plus polyvalents avec lesquels vous pouvez commencer aujourd'hui. On dit à juste titre que ce langage de programmation est le langage du Web et qu'il est essentiel pour ajouter de l'interactivité à vos sites Web.
L'élément de formulaire est l'un des éléments HTML les plus utilisés sur les sites Web. Ces formulaires prennent les données de l'utilisateur et les traitent dans le navigateur ou le serveur. Cependant, il est important de valider ces entrées pour résoudre les problèmes de sécurité et les bogues indésirables.
Comprendre la manipulation du DOM
Avant de procéder à la mise en œuvre de la validation de formulaire côté client avec JavaScript, il est essentiel de comprendre le modèle objet de document, communément appelé « DOM ». Le DOM est une API standardisée qui permet à JavaScript d'interagir avec les éléments d'une page Web HTML.
En savoir plus : Le héros caché des sites Web : Comprendre le DOM
Pour ajouter des écouteurs d'événement et récupérer les entrées utilisateur, vous devrez comprendre les bases de la manipulation du DOM. Voici un exemple qui explique comment vous pouvez modifier le contenu de la page Web à l'aide de l'API DOM et de JavaScript :
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Dans le code ci-dessus, le
Maintenant que vous avez compris les bases de la manipulation DOM, allons de l'avant et implémentons la validation de formulaire.
Validation de formulaire avec JavaScript
Il existe différents types d'entrées que vous pouvez prendre d'un utilisateur. Le type de texte, le type d'e-mail, le type de mot de passe, les boutons radio et les cases à cocher sont parmi les plus courants que vous puissiez rencontrer. En raison de cette grande majorité de types d'entrée, vous devrez utiliser une logique différente pour valider chacun d'eux.
Avant d'aborder la validation, prenons un moment pour comprendre les formulaires HTML et leur importance. Les formulaires HTML sont l'un des principaux moyens d'interagir avec le site Web, car ils vous permettent de saisir vos données, d'appliquer des modifications, d'invoquer des fenêtres contextuelles, de soumettre des informations à un serveur, etc.
comment décorrompre un fichier vidéo
Le HTML L'élément est utilisé pour créer ces formulaires destinés aux utilisateurs. Voici comment valider les entrées d'un formulaire HTML :
1. Validation des e-mails
Que vous construisiez un système d'authentification ou que vous récupériez simplement les e-mails des utilisateurs pour votre newsletter, il est important de valider l'e-mail avant de pouvoir le stocker dans votre base de données ou le traiter. Pour vérifier si un e-mail remplit toutes les conditions requises, vous pouvez utiliser un expression régulière .
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. Validation du mot de passe
Les mots de passe sont une donnée cruciale qui nécessite un type spécial de validation pour assurer sa sécurité. Considérez un formulaire d'inscription comportant deux champs : les champs de mot de passe et de confirmation du mot de passe. Pour valider ces paires d'entrées, voici quelques éléments à prendre en compte :
- Le mot de passe doit comporter plus de 6 caractères.
- La valeur du mot de passe et le champ de confirmation du mot de passe doivent être identiques.
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. Validation d'entrée radio
L'entrée radio HTML est un type spécial d'élément de contrôle graphique qui permet à l'utilisateur de choisir une seule option parmi un ensemble prédéfini d'options mutuellement exclusives. Un cas d'utilisation courant d'une telle entrée serait la sélection du sexe. Pour valider une telle saisie, vous devrez vérifier si au moins l'un d'entre eux est sélectionné.
Ceci peut être réalisé en utilisant le Opérateurs logiques comme le ET ( && ) et pas ( ! ) opérateur de cette manière :
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. Sélectionnez Validation d'entrée
Les L'élément HTML est utilisé pour créer une liste déroulante. Les balises à l'intérieur du élément définissent les options disponibles dans la liste déroulante. Chacun de ces les balises ont un attribut value qui leur est associé.
coût de remplacement de la batterie macbook pro 2013
Pour l'option par défaut ou initiale, vous pouvez définir sa valeur comme étant une chaîne vide afin qu'elle soit considérée comme une option invalide. Pour toutes les autres options, définissez un attribut de valeur approprié. Voici un exemple de la façon dont vous pouvez valider un élément d'entrée :
HTML :
Select One
Mr
Mrs
Ms
JavaScript :
comment empêcher le téléphone de surchauffer
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Validation des cases à cocher
Les éléments d'entrée du type case à cocher sont affichés par défaut sous forme de cases qui sont cochées ou cochées lorsqu'elles sont activées. Une case à cocher vous permet de sélectionner des valeurs uniques à soumettre dans un formulaire. Les cases à cocher sont un choix courant pour l'entrée « accepter les termes et conditions ».
Pour savoir si une case est cochée ou non, vous pouvez accéder à l'attribut coché sur l'entrée de la case à cocher. Voici un exemple :
HTML :
I agree to the terms and conditionsJavaScript :
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Mieux vaut prévenir que guérir
Il est toujours recommandé de valider toutes les entrées que vous recevez d'un visiteur pour offrir une expérience sûre et sécurisée. Les pirates tentent toujours d'entrer des données malveillantes dans les champs de saisie pour effectuer des attaques de scripts intersites et des injections SQL.
Maintenant que vous comprenez comment valider vos entrées HTML, pourquoi ne pas essayer en créant un formulaire et en mettant en œuvre les stratégies que vous avez vues ci-dessus ?
Partager Partager Tweeter E-mail Comment créer un formulaire en HTMLPermettez à vos utilisateurs de saisir des données sur vos sites Web avec des formulaires HTML.
Lire la suite Rubriques connexes- La programmation
- HTML
- JavaScript
- Développement web
- Tutoriels de codage
Nitin est un développeur de logiciels passionné et un étudiant en génie informatique qui développe des applications Web à l'aide des technologies JavaScript. Il travaille en tant que développeur Web indépendant et aime écrire pour Linux et la programmation pendant son temps libre.
Plus de Nitin RanganathAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner