Validation de formulaire du côté client

La validation du formulaire client est cruciale - il économise du temps et de la bande passante et offre plus d'options pour indiquer où les utilisateurs font des erreurs lors du remplissage des formulaires. Cela étant dit, cela ne signifie pas que vous n'avez pas besoin de vérification côté serveur. Les utilisateurs visitant votre site Web peuvent avoir utilisé un ancien navigateur ou un JavaScript désactivé, ce qui rompra la vérification uniquement du client. La vérification côté client et serveur se complète, ils ne doivent donc pas être utilisés indépendamment.

Pourquoi la vérification du client est-elle importante?

Il y a deux bonnes raisons d'utiliser l'authentification du client:

1. C'est un moyen rapide de vérifier: si quelque chose ne va pas, une alerte sera déclenchée lorsque le formulaire sera soumis.

2. Vous pouvez afficher une seule erreur en toute sécurité à la fois et vous concentrer sur les mauvais champs pour vous assurer que l'utilisateur remplit tous les détails dont vous avez besoin correctement.

Deux méthodes de vérification principales

Les deux principales méthodes de vérification du formulaire du client sont:

• Afficher une erreur à la fois, concentrez-vous sur les champs problématiques
• Afficher toutes les erreurs en même temps, style de vérification côté serveur

Bien que l'affichage de toutes les erreurs en même temps soit nécessaire pour la vérification côté serveur, une meilleure façon de vérifier le client est d'afficher une erreur à la fois. Cela permet de mettre en évidence uniquement les champs qui ont été remplis de manière incorrecte, ce qui facilite la modification des visiteurs et soumettez le formulaire avec succès. Si vous présentez toutes les erreurs à l'utilisateur en même temps, la plupart des gens essaieront de les souvenir et de les corriger immédiatement, plutôt que d'essayer de soumettre à nouveau après chaque correction.

Compte tenu de ces avantages, je me concentrerai uniquement sur la méthode de vérification qui montre une erreur à la fois.

comment vérifier la forme

Par exemple, l'extrait de code suivant:

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

tel:

quel est le problème? Eh bien, si vous ajoutez un autre formulaire avant cela, le code essaiera de valider le mauvais formulaire.

Une meilleure façon consiste à inclure le nom du formulaire:

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onSubmit = "return validatemyform ();" & gt;

Alors supprimons le nom du formulaire:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

Cette dernière méthode utilise l'objet ceci, qui pointe toujours vers l'objet actuel. Cela rend notre code plus portable et gagne le temps de frappe.

Comment faciliter la vie des visiteurs maintenant? Concentrons-nous sur les champs qui déclenchent l'erreur, plutôt que de les laisser le chercher par eux-mêmes.

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

Avec ces modifications, le navigateur se concentrera sur le remplissage des champs incorrects et sélectionnera même le texte pour le visiteur. Cela se produira également automatiquement si le défilement est requis.

ok, c'est génial, mais pensez-vous qu'il y a un peu trop de code pour chaque champ? Que se passe-t-il si nous créons une bibliothèque simple de fonctions qui peuvent économiser beaucoup de temps de frappe et de téléchargement sur la page? Eh bien, ensuite nous le ferons - nous définirons nos fonctions de base pour rendre le code de validation plus court.

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

Cette fonction effectue une vérification simple des nombres - il vérifie si le champ ne contient que des nombres et éventuellement, s'il se situe dans une plage donnée. Vous remarquerez que ce code passe un message d'erreur en tant que paramètre. Pour utiliser une fonction comme celle-ci, nous pouvons essentiellement l'ajouter au gestionnaire onSubmit comme suit:

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit = "return validaTenumber (this.phone,
«Veuillez saisir le numéro de téléphone, seulement numérique», 5, 10); »& gt; Appelez-le comme ceci, il vérifiera si le numéro de téléphone est numérique et est plus long que 5 chiffres et moins de 10 chiffres. Remarque comment passer l'objet téléphonique en tant que paramètre?

Une autre façon de vérifier les nombres est de les obliger à se situer dans une plage donnée. Pour faire de la fonction, effectuez une telle validation, modifiez simplement la ligne de contrôle en:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

Si vous souhaitez appliquer plusieurs vérifications à un formulaire, vous pouvez intégrer plusieurs règles dans le gestionnaire onSubmit. Par exemple, imaginez qu'en plus du numéro de téléphone, nous devons également entrer notre premier et notre nom:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

onsubmit = "return (

validaTenumber (ce.phone, 'Veuillez saisir le téléphone
Numéro, numéro uniquement ', 5, 10) &&
ValidateString (this.firstname, 'Veuillez entrer
Votre nom ', 3, 15) &&
ValidateString (this.lastName, 'Veuillez entrer
Votre nom de famille ', 3, 15)
.

Comme vous pouvez le voir, les fonctions de validation des chaînes semblent plus ou moins les mêmes; vous pouvez également écrire d'autres fonctions et les utiliser conjointement avec ces fonctions.

<code>function validateNumber(field, msg, min, max) {  <br>
if (!min) { min = 0 }  <br>
if (!max) { max = 255 }  <br>
  <br>
if ( (parseInt(field.value) != field.value) ||   <br>
        field.value.length  max) {  <br>
alert(msg);  <br>
field.focus();  <br>
field.select();  <br>
return false;  <br>
}  <br>
  <br>
return true;  <br>
}</code>

Un champ commun est requis sous de nombreuses formes sur le Web, à savoir l'adresse e-mail de l'utilisateur. J'ai vu beaucoup de fonctions qui font cela, mais généralement le moyen le plus simple et le plus simple de vérifier les adresses e-mail est d'utiliser des expressions régulières.

Maintenant, nous étendrons notre fonction afin qu'elle puisse définir les champs comme facultatifs.

Pour vérifier l'e-mail requis, vous devez l'appeler comme:

<code></code>

si vous souhaitez le définir sur facultatif:

<code>if ((parseInt(field.value) != field.value) ||   <br>
field.value  max) {</code>

JavaScript ne peut pas être utilisé pour la vérification seul, mais cela peut être d'une grande aide si vous l'avez. Plus le code que vous intégrez dans HTML est compact, mieux c'est - il économise du temps de téléchargement et les moteurs de recherche vous aimeront!

<code></code>

Les questions fréquemment posées sur la vérification du formulaire (FAQ)

Quelle est la différence entre la vérification du client et la vérification côté serveur?

La vérification du client est effectuée dans le navigateur de l'utilisateur à l'aide de JavaScript avant que les données de formulaire ne soient envoyées au serveur. Il fournit des commentaires instantanés et améliore l'expérience utilisateur. Cependant, il peut être contourné en désactivant JavaScript ou en manipulant le code, il n'est donc pas complètement sûr.

D'un autre côté, la vérification côté serveur est effectuée sur le serveur après avoir soumis les données du formulaire. C'est plus sûr car les utilisateurs ne peuvent pas le contourner. Cependant, il nécessite un aller-retour au serveur, ce qui peut affecter les performances et l'expérience utilisateur. Par conséquent, il est recommandé d'utiliser la vérification du client et du serveur pour la meilleure expérience de sécurité et d'utilisateur.

Comment implémenter la validation du formulaire dans PHP?

PHP fournit une variété de fonctions de validation de formulaire. Par exemple, vous pouvez utiliser la fonction filter_var () avec différents filtres pour valider et nettoyer les données d'entrée. Voici un exemple simple de vérification d'une adresse e-mail:

$ email = $ _post ["e-mail"]; if (! filter_var ($ e-mail, filter_validate_email)) { Echo "format de messagerie non valide"; } Ce code vérifie si l'adresse e-mail soumise est formatée correctement. Sinon, un message d'erreur s'affiche.

Quelles sont les techniques de vérification courantes?

Certaines techniques de vérification courantes incluent les champs requis, les limites de longueur, la correspondance des modèles et la vérification des types de données. Les champs requis garantissent que l'utilisateur remplit toutes les informations nécessaires. Les limites de longueur limitent le nombre de caractères qui peuvent être entrés. La correspondance du modèle vérifie si l'entrée correspond à un modèle spécifique, tel qu'une adresse e-mail ou un numéro de téléphone. La vérification du type de données garantit que l'entrée est le type correct, tel qu'un nombre ou une date.

Comment afficher le message d'erreur de vérification?

Vous pouvez utiliser JavaScript pour la vérification du client ou la vérification côté serveur à l'aide de PHP pour afficher les messages d'erreur de vérification. Dans JavaScript, vous pouvez utiliser la méthode setCustomValidity () pour configurer un message de validation personnalisé. Dans PHP, vous pouvez stocker des messages d'erreur dans des variables et les afficher sous une forme.

Comment vérifier la case à cocher?

Vous pouvez vérifier la case à cocher en modifiant si la case à cocher est sélectionnée. Dans JavaScript, vous pouvez utiliser la propriété cochée. Dans PHP, vous pouvez vérifier si la valeur de case à cocher apparaît dans $ _POST ou $ _GET.

Comment vérifier la liste déroulante?

Vous pouvez vérifier la liste déroulante en vérifiant si l'option valide est sélectionnée. Dans JavaScript, vous pouvez utiliser la propriété SelectedIndex. Dans PHP, vous pouvez vérifier si la valeur sélectionnée est dans un tableau de valeurs valides.

Comment vérifier les boutons radio?

Vous pouvez vérifier le bouton radio en vérifiant si l'une des options est sélectionnée. Dans JavaScript, vous pouvez parcourir les boutons radio et utiliser la propriété vérifiée. Dans PHP, vous pouvez vérifier si la valeur du bouton radio apparaît dans $ _POST ou $ _GET.

Comment vérifier la date?

Vous pouvez vérifier la date en vérifiant si la date est formatée correctement et s'il s'agit d'une date réelle. Dans JavaScript, vous pouvez utiliser l'objet date. Dans PHP, vous pouvez utiliser la fonction CheckDate ().

Comment vérifier le téléchargement de fichiers?

Vous pouvez vérifier les téléchargements de fichiers en vérifiant la taille du fichier, le type de fichier et l'extension du fichier. Dans JavaScript, vous pouvez utiliser la propriété Fichiers. En PHP, vous pouvez utiliser le tableau $ _files.

Comment prévenir l'injection SQL?

Vous pouvez empêcher l'injection SQL en utilisant des instructions prétraitées ou des requêtes paramétrées qui séparent le code SQL des données. Cela empêche les données d'être interprétées comme du code. Dans PHP, vous pouvez utiliser des extensions PDO ou MySQLI pour exécuter des instructions de prétraitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!