Validation jQuery : restreindre la saisie aux nombres et aux points décimaux-js tutoriel-php.cn

Validation jQuery : restreindre la saisie aux nombres et aux points décimaux

王林

Libérer： 2024-02-24 11:33:30

original

1167 Les gens l'ont consulté

Validation jQuery : restreindre la saisie aux nombres et aux points décimaux

Validation jQuery : seuls les nombres et les points décimaux peuvent être saisis

Dans le développement web, il est souvent nécessaire de vérifier le contenu saisi par l'utilisateur, notamment lorsqu'il s'agit de saisie numérique, il est généralement nécessaire de limiter l'utilisateur de saisir uniquement des nombres et des points décimaux. Cet article explique comment utiliser jQuery pour réaliser cette fonction et fournit des exemples de code spécifiques.

Analyse des exigences

Pendant le processus de développement, les utilisateurs doivent parfois saisir uniquement des chiffres et des points décimaux, tels que des zones de saisie de montant, des zones de saisie de quantité, etc. Afin de garantir l’exactitude des données et la standardisation du format, nous devons limiter les entrées des utilisateurs.

Solution

Nous pouvons utiliser jQuery combiné avec des expressions régulières pour limiter les entrées de l'utilisateur. Tout d'abord, nous devons déterminer si les caractères saisis par l'utilisateur répondent aux exigences dans l'événement keypress de la zone de saisie. S'ils ne répondent pas aux exigences, bloquez l'événement par défaut. Ensuite, en cas de flou de la zone de saisie, nous pouvons traiter davantage le contenu saisi par l'utilisateur pour garantir que le contenu saisi répond aux exigences.

Exemple de code spécifique

Ce qui suit est un exemple de code simple qui implémente la restriction selon laquelle seuls les nombres et les points décimaux peuvent être saisis dans une zone de saisie :

<!DOCTYPE html>
<html>
<head>
  <title>Validation jQuery : restreindre la saisie aux nombres et aux points décimaux</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="numberInput" placeholder="只能输入数字和小数点">
  
  <script>
    $(document).ready(function(){
      $('#numberInput').keypress(function(event){
        var charCode = (event.which) ? event.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
          event.preventDefault();
        } else {
          return true;
        }
      });
      
      $('#numberInput').blur(function(){
        var inputValue = $(this).val();
        var newValue = inputValue.replace(/[^0-9.]/g, '');
        $(this).val(newValue);
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Dans ce code, nous avons d'abord introduit la bibliothèque jQuery et créé un Zone de saisie, l'identifiant est numberInput. Dans l'événement ready, nous surveillons l'événement keypress de la zone de saisie pour déterminer si le contenu d'entrée répond aux exigences ; dans l'événement Blur, nous traitons davantage le contenu d'entrée pour supprimer les caractères qui ne remplissent pas les conditions.

Résumé

Grâce aux exemples de code ci-dessus, nous pouvons implémenter des restrictions sur le contenu saisi par l'utilisateur et garantir que le contenu saisi répond aux exigences. En développement réel, le code peut être modifié et ajusté de manière appropriée en fonction des besoins spécifiques pour répondre aux besoins de différents scénarios. J'espère que cet article vous sera utile, merci d'avoir lu !

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!