JavaScript détermine si la zone de texte est vide pour désactiver le bouton

Dans les formulaires Web, il est souvent nécessaire d'effectuer une vérification à blanc sur les données saisies par l'utilisateur pour garantir la validité des données. Normalement, nous pouvons utiliser JavaScript pour vérifier la zone de saisie du formulaire. Cet article présente principalement l'utilisation de JavaScript pour déterminer si la zone de texte est vide et désactiver le bouton en fonction du résultat.

Tutoriel d'introduction à JavaScript

Avant de comprendre comment JavaScript détermine si une zone de texte est vide, passons d'abord en revue la syntaxe de base et les opérations courantes de JavaScript.

JavaScript est un langage de script capable d'obtenir des effets interactifs dynamiques côté navigateur. Sa syntaxe de base est similaire au langage C et Java, composée de variables, d'instructions de contrôle, de fonctions, etc. Voici quelques syntaxes couramment utilisées :

Déclaration de variable :

var x; // Déclare une variable nommée x

Opération d'affectation :

x = 10; // Fixe la valeur de x à 10

Instruction conditionnelle :

if (x > 5) {
console.log("x est supérieur à 5");
} else {
console.log("x est inférieur ou égal à 5");
}

Boucle instruction :

for (var i = 0; i < 10; i++) {
console.log(i);
}

Déclaration de fonction :

function myFunction(x, y) {
return x + y;
}

Utiliser JavaScript détermine si la zone de texte est vide

Ensuite, nous utiliserons un exemple pour apprendre à utiliser JavaScript pour déterminer si la zone de texte est vide et désactiver le bouton en fonction du résultat.

Tout d'abord, nous insérons les éléments textarea et bouton qui doivent être vérifiés dans la page HTML. Le code est le suivant :

<code class="html">  <textarea id="message"></textarea>
  <button id="submitBtn" onclick="submitForm()">提交</button></p>
<p> Parmi eux, l'identifiant de l'élément textarea est message, et l'identifiant de l'élément bouton est submitBtn. L'événement onclick appellera la fonction submitForm(). </p>
<p>Ensuite, nous utilisons JavaScript pour écrire la fonction submitForm(), qui vérifie si des données ont été saisies dans la zone de texte. Si la valeur de textarea est vide, le bouton est désactivé ; sinon, le bouton est activé. Le code est le suivant : la fonction </p>
<pre class="brush:php;toolbar:false"><code class="javascript">function submitForm() {
  var messageInput = document.getElementById('message');
  var submitBtn = document.getElementById('submitBtn');

  if (messageInput.value.trim() === '') {
    submitBtn.disabled = true;
  } else {
    submitBtn.disabled = false;
  }
}</code>

submitForm() obtient d'abord les références aux éléments textarea et bouton via la méthode getElementById(). Ensuite, récupérez la valeur dans la zone de texte via l'attribut value et utilisez la méthode trim() pour supprimer les espaces.

Enfin, définissez la propriété désactivée du bouton sur true ou false pour désactiver ou activer le bouton, selon que la zone de texte est vide ou non.

Résumé

Cet article présente l'utilisation de JavaScript pour déterminer si une zone de texte est vide afin de vérifier les données saisies par l'utilisateur. Grâce aux exemples ci-dessus, nous pouvons voir que JavaScript, en tant que langage de script couramment utilisé, peut nous aider à mettre en œuvre diverses fonctions de vérification de formulaire et à améliorer l'expérience utilisateur des pages Web.

Bien entendu, l’utilisation de JavaScript va bien au-delà. Dans les applications pratiques, nous pouvons utiliser davantage de syntaxe et d'opérations pour implémenter des fonctions telles que l'interaction dynamique et la vérification des données, améliorant ainsi continuellement l'expérience utilisateur et la fonctionnalité des pages Web.

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!