Comment utiliser des expressions régulières en javascript pour réaliser la fonction de saisie uniquement de nombres

Lors de la mise en œuvre de la validation de formulaire ou du traitement des données, nous devons souvent utiliser des expressions régulières pour filtrer ou formater les données d'entrée, en particulier lorsque nous devons saisir des nombres. L'utilisation d'expressions régulières peut empêcher les utilisateurs de saisir des formats non numériques ou incorrects, augmentant ainsi la robustesse. et l'expérience utilisateur du programme. En JavaScript, nous pouvons utiliser des expressions régulières pour limiter la saisie de l'utilisateur aux nombres. Cet article explique comment utiliser les expressions régulières JavaScript pour implémenter la fonction de saisie uniquement de nombres.

L'expression régulière est un puissant outil de correspondance de chaînes. En définissant certaines règles, vous pouvez faire correspondre les chaînes qui correspondent aux règles. En JavaScript, nous pouvons utiliser l'objet RegExp pour créer des expressions régulières. Voici une syntaxe de base des expressions régulières :

• Le contenu entre deux barres obliques représente les règles de l'expression régulière. Par exemple, /123/ signifie correspondre à la séquence de caractères spécifiée « 123 » qui apparaît dans la chaîne.
• "^" représente une chaîne commençant par le caractère spécifié, par exemple, /^123/ représente une chaîne commençant par "123".
• "$" représente une chaîne se terminant par le caractère spécifié, par exemple, /123$/ représente une chaîne se terminant par "123".
• "d" signifie correspondre à un caractère numérique, équivalent à "[0-9]".
• "+" signifie faire correspondre le caractère précédent apparaissant une ou plusieurs fois. Par exemple, /d+/ correspond à un ou plusieurs caractères numériques.
• "{" et "}" sont utilisés pour spécifier la plage d'heures de correspondance. Par exemple, /d{3,5}/ signifie correspondre à 3 à 5 caractères numériques.
• "|" signifie ou, par exemple, /a|b/ signifie correspondre aux caractères "a" ou "b".
• "()" signifie un regroupement de capture, qui peut être utilisé pour extraire les pièces correspondantes. Par exemple, /(d{3})-(d{4})/ signifie faire correspondre les numéros de téléphone et stocker respectivement l'indicatif régional et le numéro de téléphone dans des groupes de capture.
• "[]" représente un jeu de caractères et peut correspondre à n'importe quel caractère du jeu. Par exemple, /[abc]/ correspond aux caractères « a », « b » ou « c ».

Avec la syntaxe de base ci-dessus, nous pouvons construire une expression régulière pour réaliser la fonction de saisie uniquement de nombres. Voici un exemple :

function isNumber(str) {
  var reg = /^\d+$/;
  return reg.test(str);
}

console.log(isNumber("123")); // true
console.log(isNumber("12a3")); // false
console.log(isNumber("")); // false

Le code ci-dessus définit une fonction isNumber() pour déterminer si le paramètre de chaîne transmis est un nombre. La fonction utilise l'expression régulière /^d+$/ en interne pour faire correspondre les chaînes contenant uniquement des nombres. Parmi eux :

• "^" signifie le début.
• "d" représente un caractère numérique.
• "+" signifie faire correspondre le caractère précédent apparaissant une ou plusieurs fois.
• "$" indique la fin.

Par conséquent, le contenu correspondant à l'expression régulière ci-dessus est : une chaîne qui commence par un caractère numérique, apparaît une ou plusieurs fois et se termine par un caractère numérique. Si le paramètre de chaîne transmis répond aux règles de correspondance de l'expression régulière, il renvoie vrai, sinon il renvoie faux.

Dans les applications pratiques, nous pouvons utiliser les fonctions ci-dessus pour la validation de formulaires, le traitement des données et d'autres scénarios afin de filtrer et de formater les données saisies par l'utilisateur. Par exemple, l'exemple suivant implémente un composant de formulaire qui ne peut saisir des nombres que via le framework jQuery :

<input type="text" class="number-input">

$(function() {
  $(".number-input").on("input", function() {
    var value = $(this).val();
    if (!isNumber(value)) {
      $(this).val("");
    }
  });
});

Le code ci-dessus implémente un composant de zone de texte qui ne peut saisir des nombres que via le framework jQuery. Lorsque l'utilisateur saisit des caractères non conformes aux règles, la zone de texte est automatiquement effacée. Parmi elles, la fonction on("input") surveille l'événement d'entrée de la zone de texte et la fonction isNumber() est utilisée pour déterminer si le contenu d'entrée est un nombre. Grâce à une implémentation de code simple, nous pouvons limiter efficacement les entrées des utilisateurs et améliorer la fiabilité et la stabilité du formulaire.

En résumé, les expressions régulières sont un outil de correspondance de chaînes très utile qui peut être créé et utilisé en JavaScript via l'objet RegExp. Tant que vous maîtrisez la syntaxe de base et les règles communes, vous pouvez rapidement construire diverses expressions régulières et implémenter diverses fonctions de traitement de données et de filtrage de chaînes. En utilisant des expressions régulières pour limiter la saisie de chiffres uniquement, l'exactitude et la fiabilité des données peuvent être efficacement améliorées, ainsi que la robustesse et l'expérience utilisateur du programme.

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!