Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ?

Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ?

Dans de nombreuses applications Web, les formulaires constituent la méthode d'interaction la plus courante entre les utilisateurs et le système. Cependant, le contenu saisi par l'utilisateur doit souvent être validé pour garantir l'exactitude et l'exhaustivité des données. Dans cet article, nous apprendrons comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire et fournirons des exemples de code spécifiques.

1. Créer un formulaire
   Tout d'abord, nous devons créer un formulaire simple en HTML pour démontrer la fonction de vérification en temps réel. Voici un exemple de formulaire contenant un nom d'utilisateur, un mot de passe et un e-mail :

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" required>
</form>

2. Sélectionnez les zones de saisie et ajoutez des événements de validation
   Ensuite, nous utilisons JavaScript pour sélectionner ces zones de saisie et leur ajoutons des événements de validation en temps réel. En écoutant les événements d'entrée ou les événements de perte de concentration, nous pouvons vérifier ce que l'utilisateur saisit en temps réel.

// 选择输入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校验事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);

3. Écrire une fonction de validation
   Ensuite, nous devons écrire une fonction de validation pour vérifier le contenu de la zone de saisie. En fonction des règles de validation spécifiques, nous pouvons utiliser des expressions régulières ou d'autres méthodes pour valider la saisie de l'utilisateur.

function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校验通过
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校验失败
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校验通过
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校验失败
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校验通过
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校验失败
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}

4. Résultats de vérification stylisés
   Enfin, nous pouvons définir les styles de vérification réussie et d'échec de la vérification dans le fichier CSS afin que les utilisateurs puissent voir intuitivement l'état de la zone de saisie.

.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}

À ce stade, nous avons terminé les étapes d'utilisation de JavaScript pour implémenter la fonction de vérification en temps réel du contenu de la zone de saisie du formulaire. Lorsque l'utilisateur saisit dans la zone de saisie, nous utilisons la fonction de validation pour vérifier le contenu d'entrée et mettre à jour le style de la zone de saisie en fonction des résultats de validation. Cela fournit aux utilisateurs un retour immédiat qui les aide à trouver les erreurs et à les corriger plus rapidement.

Résumé
Dans cet article, nous avons appris à utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie du formulaire. En sélectionnant la zone de saisie, en ajoutant des événements de validation, en écrivant des fonctions de validation et en stylisant les résultats de validation, nous pouvons fournir aux utilisateurs une méthode de retour d'information immédiate pour les aider à mieux effectuer la saisie de formulaire. Il s'agit d'une astuce simple et pratique qui peut améliorer l'expérience utilisateur et la qualité des données, et réduire l'impact des opérations incorrectes.

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!