Heim Web-Frontend Front-End-Fragen und Antworten So verwenden Sie reguläre Ausdrücke in Javascript, um die Funktion zu realisieren, nur Zahlen einzugeben

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

Apr 21, 2023 am 09:12 AM

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.

Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.

Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.

See all articles