Le formulaire JavaScript est vide et ne peut pas être soumis

Avec le développement d'Internet, les formulaires Web sont devenus une méthode importante de communication en réseau. Ils sont non seulement utilisés pour la connexion au site Web, l'enregistrement, la messagerie et d'autres fonctions, mais sont également largement utilisés dans diverses transactions, enquêtes et autres services en ligne. commentaires, etc. occasion. Afin de garantir l’exactitude et l’exhaustivité des données, il est particulièrement important de vérifier la légalité du formulaire. Cet article explique principalement comment utiliser JavaScript pour implémenter la fonction selon laquelle le formulaire ne peut pas être soumis s'il est vide.

1. Contexte selon lequel le formulaire est vide et ne peut pas être soumis

Les données du formulaire sont un support de données clé pour la communication entre le site Web et les utilisateurs, l'exactitude et la légalité de ses données. sont directement liés à la sécurité du site Web et au fonctionnement normal de l'entreprise. Par conséquent, la vérification des formulaires est l’une des exigences de sécurité les plus fondamentales lors du développement de sites Web. La vérification du formulaire peut essentiellement être divisée en deux méthodes : la vérification côté serveur et la vérification côté client.

La vérification du formulaire côté serveur vérifie généralement les données du formulaire avant de les soumettre au script d'arrière-plan (tel que PHP, ASP, JSP, etc.). Cette méthode peut généralement détecter la légalité et la sécurité des données. Cependant, une requête réseau supplémentaire est requise pour les données transmises, ce qui entraînera une certaine surcharge de performances et une dégradation de l'expérience utilisateur.

La vérification côté client effectue généralement une vérification du formulaire sur le client via des scripts JavaScript. Les utilisateurs peuvent effectuer une vérification avant de soumettre le formulaire, évitant ainsi la surcharge de plusieurs requêtes réseau et améliorant l'expérience utilisateur. Cependant, la vérification côté client comporte certains risques, car les utilisateurs peuvent désactiver les scripts JavaScript, ce qui rend la vérification invalide. Elle n'est donc utilisée que comme méthode de vérification auxiliaire de base.

Dans la vérification côté client, une exigence courante est que s'il y a une valeur nulle dans le formulaire, elle ne peut pas être soumise avec succès. Cela peut effectivement empêcher les utilisateurs de soumettre des données incomplètes ou des erreurs d'opération entraînant des données incorrectes. . produire. La méthode de mise en œuvre spécifique est présentée ci-dessous.

2. Le processus d'implémentation du formulaire étant vide et ne pouvant pas être soumis

Lors de l'implémentation de la fonction, le formulaire est vide et ne peut pas être soumis, vous devez d'abord comprendre certains attributs et méthodes de formulaire dans les scripts JavaScript , qui seront présentés ci-dessous.

1. Attributs du formulaire

Il existe certains attributs importants dans le formulaire, qui peuvent être utilisés en JavaScript, notamment les suivants : #🎜 🎜 #

(1) form.elements : Tableau d'éléments de formulaire, vous pouvez obtenir des références à tous les éléments du formulaire.

(2) form.length : Le nombre d'éléments du formulaire est plus important dans le formulaire de vérification.

(3) form.action : adresse de soumission du formulaire.

(4) form.method : méthode de soumission de formulaire, il existe actuellement deux méthodes principales : GET et POST.

Méthode Form

Les méthodes Form sont généralement des fonctions dans des scripts JavaScript qui opèrent sur des formulaires, notamment :

# 🎜🎜 # (1) submit() : Soumettre le formulaire

(2) reset() : Réinitialiser le formulaire

(3) resetForm() : Réinitialiser le formulaire #🎜 🎜 #

(4) checkValidity() : Vérifier la légalité du formulaire

(5) reportValidity() : Afficher les résultats de la vérification

formulaire Attributs et méthodes des éléments

3. Les attributs et méthodes des éléments de formulaire sont principalement utilisés via des références aux éléments de formulaire, notamment les suivants :

(1) element.value : Le valeur de l'élément

(2) element.type : Le type de l'élément

(3) element.checked : L'état coché du bouton radio ou de la case à cocher # 🎜🎜 #

(4) element.defaultValue : La valeur par défaut de l'élément

(5) element.focus() : L'élément obtient le focus

( 6) element.blur (): L'élément perd le focus

Pour implémenter la fonction selon laquelle le formulaire ne peut pas être soumis s'il est vide, vous pouvez suivre les étapes suivantes en JavaScript.

Obtenir les éléments du formulaire

Vous devez d'abord obtenir les éléments du formulaire qui doivent être vérifiés, utilisez form.elements.length et form. elements[i] pour obtenir le nombre d’éléments de formulaire et les références d’éléments de formulaire correspondantes.

Jugez les éléments du formulaire

Parcourez les éléments du formulaire et déterminez si la valeur de chaque élément est vide. S'il y a une valeur nulle, annulez. l'opération de soumission, sinon continuez l'opération de soumission.
2. Le code est le suivant :

function checkForm(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.value == "") {
            alert(element.name + "不能为空！");
            element.focus();
            return false;
        }
    }
    return true;
}

Dans cet exemple, utilisez une boucle for pour parcourir tous les éléments du formulaire, déterminez si la valeur de chaque élément du formulaire est vide, et apparaît si la boîte de dialogue est vide et renvoie une valeur fausse, indiquant que le formulaire ne peut pas être soumis. S'il n'y a pas de valeur nulle, il renvoie vrai, c'est-à-dire que le formulaire peut être soumis. Dans le même temps, la méthode element.focus() est appelée pour que l'utilisateur reste immédiatement concentré sur la zone de saisie, ce qui permet à l'utilisateur de corriger plus facilement les erreurs.

Enfin, enregistrez l'événement onsubmit pour le formulaire et appelez la fonction checkForm().

<form id="myForm" action="submit.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

3. Résumé

JavaScript est un langage de script très important dans le développement Web. En utilisant JavaScript, vous pouvez réaliser des fonctions riches telles que la validation de formulaire, la pièce jointe de style, les opérations DOM. , etc. Fonction.

Cet article présente en détail comment utiliser JavaScript pour implémenter la fonction selon laquelle le formulaire ne peut pas être soumis s'il est vide. Il comprend principalement des étapes telles que l'obtention des éléments du formulaire, le parcours des éléments du formulaire et le jugement. ils sont vides, enregistrant l'événement onsubmit pour le formulaire, etc. Nous espérons être plus utiles à l'aide des développeurs Web. Dans le même temps, il convient de noter que lors de l'utilisation de JavaScript pour vérifier le formulaire, des facteurs tels que la sécurité et l'expérience utilisateur doivent être soigneusement pris en compte afin de garantir l'intégrité et la légalité des données.

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!