JavaScript implémente le filtrage et le comptage automatique des numéros de téléphone mobile dans les champs de texte de formulaire

Dans cette structure:

• Mobileno est un champ de texte utilisé pour entrer un numéro de téléphone portable.
• NumberCount est une boîte d'entrée en lecture seule qui affiche le nombre de numéros de téléphone mobile valides.

2. JavaScript implémente le filtrage et le comptage des nombres

La logique principale réside dans JavaScript. Nous écouterons les événements d'entrée dans le champ de texte et effectuerons immédiatement des opérations de filtrage et de comptage lorsque l'utilisateur entre ou collet le contenu.

 <cript>
    document.addeventListener ('DomContentloaded', function () {
        const MobileNumbersTextArea = document.QuerySelector ('# mobileno');
        const NumberCountInput = document.QuerySelector ('# NumberCount');

        / **
         * Traiter le contenu du champ de texte, filtre 10 numéros numériques purs et compter de mise à jour * /
        fonction processMobileNumbers () {
            Soit RawInput = MobileNumbersTextArea.Value;
            // divisé par ligne et filtre les lignes vides Laisse les lignes = RawInput.split ('\ n'). Map (line => line.trim ()). Filter (line => line! == '');

            Soit ValidNumbers = [];
            const TendigitNumberRegex = / ^ \ d {10} $ /; // correspond aux lignes numériques à 10 chiffres exacts.ForEach (num => {
                if (TendiGitNumberRegex.Test (num)) {
                    validnumbers.push (num);
                }
            });

            // supprimer les nombres valides en double (facultatif, mais recommandé)
            const UniQuevalidNumbers = [... nouveau set (validnumbers)];

            // Mette à jour le contenu du champ de texte, seuls les nombres valides sont conservés, un mobileNumbersTextArea.value = uniquevalidnumbers.join ('\ n');
            // Mise à jour du nombre de nombres NumberCountInput.Value = UniQuevalidNumbers.Length;
        }

        // Écoutez les événements d'entrée pour réaliser un traitement en temps réel // L'événement d'entrée déclenchera MobileNumbersTextArea.addeventListener («entrée», processMobileNumbers);

        // Exécuter une fois lorsque la page est chargée pour traiter le contenu initial (si le champ de texte a une valeur prédéfinie)
        processMobileNumbers ();
    });
</cript>

3. Explication détaillée de la logique de base

1. Acquisition des éléments DOM : Tout d'abord, les références DOM au champ de texte (#MobileNo) et le case d'entrée (#NumberCount) sont obtenues via Document.QuerySelector.
2. ProcessMobileNumbers Fonction : Il s'agit de la fonction de traitement de base, responsable des tâches suivantes:
   • Obtenez l'entrée d'origine : MobileNumbersTextArea.Value obtient le contenu actuel du champ de texte.
   • Split and Clean by Line : RawInput.split ('\ n') diviser le contenu en un tableau par pause de ligne. map (line => line.trim ()) supprime les espaces de début et de fin sur chaque ligne. Filtre (line => line! == '') Supprime la ligne blanc traitée.
   • Vérification de l'expression régulière : const TendigitNumberRegex = / ^ \ d {10} $ /; définit une expression régulière.
     • ^ Faites correspondre le début de la chaîne.
     • \ d Faites correspondre n'importe quel nombre (0-9).
     • {10} correspondent exactement à l'élément précédent 10 fois.
     • $ correspond à la fin de la chaîne. Cette expression régulière garantit que le nombre doit être et n'est que de 10 chiffres et ne contient aucun autre caractères (tels que des espaces, plus des signes, etc.).
   • Nombres valides de filtre : traversez chaque ligne et utilisez TendiGitNumberRegex.test (NUM) pour vérifier si la ligne répond au format à 10 chiffres. Les nombres qui répondent aux critères sont ajoutés au tableau des nombres valides.
   • Le traitement de déduplication (recommandé) : [... nouveau set (validNumbers)] est une syntaxe JavaScript concise pour créer un nouveau tableau contenant tous les éléments non dupliqués dans le tableau ValidNumbers. Cela peut éviter les dénombrements répétés lorsque l'utilisateur colle des nombres en double.
   • Field de texte de mise à jour : mobileNumbersTextArea.value = uniquevalidnumbers.join ('\ n'); Connectez les nombres valides après filtrage et déduplication avec les pauses de ligne, et réinitialisez le champ de texte, nettoyant ainsi automatiquement les nombres qui ne sont pas conformes au format.
   • Count de mise à jour : NumberCountInput.Value = UniQuevalidNumbers.Length; Met à jour la longueur du tableau de numéros valide dans la zone d'entrée de comptage.
3. Écoute d'événements : mobileNumbersTextArea.AddeventListener («entrée», processMobileNumbers); Liez la fonction ProcessMobileNumbers à l'événement d'entrée dans le champ de texte. Cela signifie que chaque fois que le contenu du champ de texte change (qu'il s'agisse de taper, de supprimer ou de coller), la fonction est exécutée immédiatement, permettant des commentaires en temps réel.
4. Traitement d'initialisation : processMobileNumbers (); Exécute une fois immédiatement après le chargement de la page, au cas où le champ de texte a des valeurs prédéfinies en HTML, garantissant le comptage et le nettoyage corrects de l'état initial.

4. Précautions et optimisation

• Sélection d'événements :
  • L'événement d'entrée est le meilleur choix pour gérer les modifications du contenu du domaine de texte. Il couvre diverses façons de modifier le contenu tel que la saisie des utilisateurs, la collage, la coupe, la glisser-déposer, et offre une expérience utilisateur en temps réel.
  • L'événement KEYUP n'est déclenché que lorsque la clé est libérée et que les opérations de panneaux non clé telles que le collage ne peuvent pas être capturées.
  • L'événement Mouseout (comme indiqué dans la réponse d'origine à la question) est déclenché lorsque la souris est déplacée de l'élément, ce qui peut conduire à une mauvaise expérience utilisateur car l'utilisateur doit déplacer la souris hors du champ de texte pour voir les résultats et n'est pas recommandé.
  • L'événement de pâte peut être spécialement géré pour les opérations de pâte, mais généralement l'événement d'entrée est suffisant.
• Expression régulière : ^ \ d {10} $ est une correspondance numérique pure 10 bits très précise. Si vous devez prendre en charge les codes de domaine internationaux ou les formats de numéro de téléphone mobile plus complexes, vous devez ajuster l'expression régulière. Par exemple, si vous permettez de commencer par un nombre, suivi d'un nombre, vous avez besoin de règles plus complexes.
• Expérience utilisateur : le nettoyage et le comptage en temps réel peuvent améliorer considérablement l'expérience utilisateur. Les utilisateurs peuvent voir instantanément quels numéros sont valides et lesquels ont été supprimés.
• Vérification côté serveur : Bien que la vérification frontale offre une bonne expérience utilisateur, assurez-vous de vérifier à nouveau le côté serveur . La vérification frontale est facilement contournée et la vérification côté serveur est la dernière ligne de défense pour la sécurité et l'intégrité des données.
• Conseils d'erreur : Dans des applications plus complexes, vous pouvez envisager de fournir des commentaires visuels ou des invites à l'utilisateur lorsqu'un numéro non valide est supprimé, indiquant quels chiffres ne répondent pas aux exigences.

Grâce aux méthodes ci-dessus, nous pouvons gérer et vérifier efficacement les numéros de téléphone mobile entrés par les utilisateurs dans le champ de texte, assurer la précision des données et améliorer l'expérience utilisateur globale.