jQuery-Validierung: Eingabe auf Zahlen und Dezimalstellen beschränken-js-Tutorial-php.cn

jQuery-Validierung: Eingabe auf Zahlen und Dezimalstellen beschränken

王林

Freigeben： 2024-02-24 11:33:30

Original

1129 Leute haben es durchsucht

jQuery-Validierung: Eingabe auf Zahlen und Dezimalstellen beschränken

jQuery-Validierung: Es dürfen nur Zahlen und Dezimalstellen eingegeben werden

In der Webentwicklung ist es häufig erforderlich, die vom Benutzer eingegebenen Inhalte zu überprüfen, insbesondere bei numerischen Eingaben ist in der Regel eine Einschränkung erforderlich Der Benutzer muss nur Zahlen und Dezimalpunkte eingeben. In diesem Artikel wird erläutert, wie Sie mit jQuery diese Funktion erreichen, und es werden spezifische Codebeispiele bereitgestellt.

Anforderungsanalyse

Während des Entwicklungsprozesses müssen Benutzer manchmal nur Zahlen und Dezimalstellen eingeben, z. B. Betragseingabefelder, Mengeneingabefelder usw. Um die Genauigkeit der Daten und die Standardisierung des Formats sicherzustellen, müssen wir Benutzereingaben begrenzen.

Lösung

Wir können jQuery in Kombination mit regulären Ausdrücken verwenden, um Benutzereingaben einzuschränken. Zunächst müssen wir feststellen, ob die vom Benutzer eingegebenen Zeichen die Anforderungen im Tastendruckereignis des Eingabefelds erfüllen. Wenn sie die Anforderungen nicht erfüllen, blockieren Sie das Standardereignis. Anschließend können wir im Unschärfeereignis des Eingabefelds den vom Benutzer eingegebenen Inhalt weiter verarbeiten, um sicherzustellen, dass der Eingabeinhalt den Anforderungen entspricht.

Spezifisches Codebeispiel

Das Folgende ist ein einfacher Beispielcode, der die Einschränkung implementiert, dass nur Zahlen und Dezimalpunkte in ein Eingabefeld eingegeben werden dürfen:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery-Validierung: Eingabe auf Zahlen und Dezimalstellen beschränken</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>

Nach dem Login kopieren

In diesem Code haben wir zuerst die jQuery-Bibliothek eingeführt und eine erstellt Eingabefeld, ID ist ZahlEingabe. Im Bereitschaftsereignis überwachen wir das Tastendruckereignis des Eingabefelds, um festzustellen, ob der Eingabeinhalt die Anforderungen erfüllt. Im Unschärfeereignis verarbeiten wir den Eingabeinhalt weiter, um Zeichen zu entfernen, die die Bedingungen nicht erfüllen.

Zusammenfassung

Durch die obigen Codebeispiele können wir Einschränkungen für Benutzereingabeinhalte implementieren und sicherstellen, dass der Eingabeinhalt den Anforderungen entspricht. In der tatsächlichen Entwicklung kann der Code entsprechend den spezifischen Anforderungen entsprechend geändert und angepasst werden, um den Anforderungen verschiedener Szenarien gerecht zu werden. Ich hoffe, dieser Artikel ist hilfreich für Sie, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonjQuery-Validierung: Eingabe auf Zahlen und Dezimalstellen beschränken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!