Comment juger s'il est vide en temps réel avec javascript

Dans le développement Web, les formulaires sont l'un des composants importants de la logique métier, et la vérification des formulaires est une considération de sécurité fondamentale. Dans le formulaire, la vérification de la zone de saisie est la plus élémentaire et la plus nécessaire, et juger si le contenu de la zone de saisie est vide est la vérification la plus courante. Ici, nous présenterons la méthode javascript pour réaliser un jugement en temps réel indiquant qu'il n'est pas vide.

1. Surveillance en temps réel de la zone de saisie
   Afin d'obtenir l'effet de jugement en temps réel indiquant qu'elle n'est pas vide, nous devons surveiller la zone de saisie en temps réel via javascript. Nous pouvons mettre à jour le texte dans la zone de saisie en temps réel en écoutant l'événement oninput de l'entrée.

<input type="text" id="input" oninput="checkEmpty()">

Dans le code ci-dessus, ajoutez l'événement oninput à l'entrée Lorsque l'événement est déclenché, une fonction nommée checkEmpty sera utilisée pour déterminer s'il y a une valeur dans l'entrée.

2. Vérifiez la valeur dans la zone de saisie
   Après avoir surveillé la zone de saisie en temps réel, nous devons écrire une fonction checkEmpty pour vérifier s'il y a une valeur dans la zone de saisie et modifier le style ou les informations d'invite de la zone de saisie selon qu'il existe ou non une valeur.

function checkEmpty() {
  var inputEl = document.getElementById("input");
  if (inputEl.value.trim() == "") {
    inputEl.style.borderColor = "red";
    inputEl.nextElementSibling.innerHTML = "此项不能为空";
  } else {
    inputEl.style.borderColor = "green";
    inputEl.nextElementSibling.innerHTML = "";
  }
}

Dans le code ci-dessus, nous obtenons d'abord l'objet DOM de la zone de saisie, puis modifions le style ou les informations d'invite de la zone de saisie en déterminant si la valeur de la zone de saisie est vide. Lorsque la zone de saisie est vide, nous définissons la couleur de la bordure de la zone de saisie sur rouge et ajoutons le message d'invite « Cet élément ne peut pas être vide » derrière la zone de saisie lorsque la zone de saisie n'est pas vide, définissons la couleur de la bordure sur vert ; et effacez les informations d'invite.

3. Appliquer la fonction de validation à toutes les zones de saisie
   Enfin, nous devons appliquer la fonction checkEmpty à toutes les zones de saisie qui nécessitent une validation. Dans le développement réel, nous marquons souvent les zones de saisie qui doivent être vérifiées avec la classe, puis utilisons la méthode document.getElementsByClassName() pour obtenir toutes les zones de saisie marquées avec cette classe, puis parcourons et appelons à nouveau la fonction checkEmpty.

var inputs = document.getElementsByClassName("required");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("input", checkEmpty);
}

Dans le code ci-dessus, nous utilisons d'abord la méthode document.getElementsByClassName("required") pour obtenir toutes les zones de saisie qui doivent être vérifiées, puis utilisons le parcours de boucle pour ajouter des événements oninput pour toutes les zones de saisie lorsque l'événement. est déclenché, la fonction checkEmpty est exécutée pour vérification.

Résumé :
Grâce aux trois étapes ci-dessus, nous pouvons implémenter une vérification simple basée sur javascript que la zone de saisie n'est pas vide en temps réel. Bien entendu, vous pouvez rencontrer des exigences de validation de formulaire plus complexes dans le développement réel. Vous souhaiterez peut-être utiliser l'exemple ci-dessus comme base et apporter les améliorations appropriées en fonction de la logique métier.

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!