So verwenden Sie reguläre Ausdrücke in Javascript, um die Funktion zu realisieren, nur Zahlen einzugeben

PHPz
Freigeben: 2023-04-21 09:32:18
Original
3892 Leute haben es durchsucht

Bei der Implementierung der Formularvalidierung oder Datenverarbeitung müssen wir häufig reguläre Ausdrücke verwenden, um die Eingabedaten zu filtern oder zu formatieren, insbesondere wenn wir Zahlen eingeben müssen. Die Verwendung regulärer Ausdrücke kann verhindern, dass Benutzer Nicht-Zahlen oder falsche Formate eingeben, und die Robustheit erhöhen und Benutzererfahrung des Programms. In JavaScript können wir reguläre Ausdrücke verwenden, um Benutzereingaben auf Zahlen zu beschränken. In diesem Artikel wird erläutert, wie Sie mit regulären JavaScript-Ausdrücken die Funktion der reinen Zahleneingabe implementieren.

Regulärer Ausdruck ist ein leistungsstarkes Tool zum Abgleichen von Zeichenfolgen. Durch die Definition bestimmter Regeln können Sie Zeichenfolgen abgleichen, die den Regeln entsprechen. In JavaScript können wir das RegExp-Objekt verwenden, um reguläre Ausdrücke zu erstellen. Im Folgenden finden Sie einige grundlegende Syntaxregeln für reguläre Ausdrücke:

  • Der Inhalt zwischen zwei Schrägstrichen stellt die Regeln des regulären Ausdrucks dar. Beispielsweise bedeutet /123/, dass die angegebene Zeichenfolge „123“ in der Zeichenfolge enthalten ist.
  • „^“ stellt eine Zeichenfolge dar, die mit dem angegebenen Zeichen beginnt, zum Beispiel /^123/ stellt eine Zeichenfolge dar, die mit „123“ beginnt.
  • „$“ stellt eine Zeichenfolge dar, die mit dem angegebenen Zeichen endet, zum Beispiel /123$/ stellt eine Zeichenfolge dar, die mit „123“ endet.
  • „d“ bedeutet Übereinstimmung mit einem numerischen Zeichen, äquivalent zu „[0-9]“.
  • „+“ bedeutet, dass das vorherige Zeichen einmal oder mehrmals vorkommt. Beispielsweise entspricht /d+/ einem oder mehreren numerischen Zeichen.
  • „{“ und „}“ werden verwendet, um den Bereich der Übereinstimmungszeiten anzugeben. Beispielsweise bedeutet /d{3,5}/, dass 3–5 numerische Zeichen übereinstimmen.
  • "|" bedeutet oder, zum Beispiel, /a|b/ bedeutet Übereinstimmung mit den Zeichen „a“ oder „b“.
  • "()" bedeutet Erfassungsgruppierung, die zum Extrahieren übereinstimmender Teile verwendet werden kann. Beispielsweise bedeutet /(d{3})-(d{4})/, Telefonnummern abzugleichen und die Vorwahl bzw. Telefonnummer in Erfassungsgruppen zu speichern.
  • "[]" stellt einen Zeichensatz dar und kann mit jedem Zeichen im Satz übereinstimmen. Beispielsweise entspricht /[abc]/ den Zeichen „a“, „b“ oder „c“.

Mit der oben genannten Grundsyntax können wir einen regulären Ausdruck erstellen, um die Funktion der reinen Zahleneingabe zu realisieren. Hier ist ein Beispiel:

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

console.log(isNumber("123")); // true
console.log(isNumber("12a3")); // false
console.log(isNumber("")); // false
Nach dem Login kopieren

Der obige Code definiert eine isNumber()-Funktion, um zu bestimmen, ob der übergebene String-Parameter eine Zahl ist. Die Funktion verwendet intern den regulären Ausdruck /^d+$/, um Zeichenfolgen abzugleichen, die nur Zahlen enthalten. Darunter:

  • "^" bedeutet der Anfang.
  • „d“ steht für ein numerisches Zeichen.
  • „+“ bedeutet, dass das vorherige Zeichen einmal oder mehrmals vorkommt.
  • „$“ zeigt das Ende an.

Daher ist der vom obigen regulären Ausdruck abgeglichene Inhalt: eine Zeichenfolge, die mit einem numerischen Zeichen beginnt, ein- oder mehrmals vorkommt und mit einem numerischen Zeichen endet. Wenn der übergebene String-Parameter die Übereinstimmungsregeln des regulären Ausdrucks erfüllt, wird „true“ zurückgegeben, andernfalls wird „false“ zurückgegeben.

In praktischen Anwendungen können wir die oben genannten Funktionen für die Formularvalidierung, Datenverarbeitung und andere Szenarien verwenden, um vom Benutzer eingegebene Daten zu filtern und zu formatieren. Das folgende Beispiel implementiert beispielsweise eine Formularkomponente, die Zahlen nur über das jQuery-Framework eingeben kann:

<input type="text" class="number-input">
Nach dem Login kopieren
$(function() {
  $(".number-input").on("input", function() {
    var value = $(this).val();
    if (!isNumber(value)) {
      $(this).val("");
    }
  });
});
Nach dem Login kopieren

Der obige Code implementiert eine Textfeldkomponente, die Zahlen nur über das jQuery-Framework eingeben kann. Wenn der Benutzer Zeichen eingibt, die nicht den Regeln entsprechen, wird das Textfeld automatisch geleert. Unter diesen überwacht die Funktion on("input") das Eingabeereignis des Textfelds und die Funktion isNumber() wird verwendet, um zu bestimmen, ob der Eingabeinhalt eine Zahl ist. Durch eine einfache Codeimplementierung können wir Benutzereingaben effektiv einschränken und die Zuverlässigkeit und Stabilität des Formulars verbessern.

Zusammenfassend lässt sich sagen, dass reguläre Ausdrücke ein sehr nützliches String-Matching-Tool sind, das über das RegExp-Objekt in JavaScript erstellt und verwendet werden kann. Solange Sie die grundlegende Syntax und allgemeine Regeln beherrschen, können Sie schnell verschiedene reguläre Ausdrücke erstellen und verschiedene Datenverarbeitungs- und Zeichenfolgenfilterfunktionen implementieren. Durch die Verwendung regulärer Ausdrücke, um die Eingabe nur von Zahlen zu begrenzen, können die Genauigkeit und Zuverlässigkeit der Daten effektiv verbessert und die Robustheit und Benutzererfahrung des Programms verbessert werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reguläre Ausdrücke in Javascript, um die Funktion zu realisieren, nur Zahlen einzugeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!