Heim > Artikel > Web-Frontend > Verwenden Sie jQuery, um die Überprüfung der Eingabefeldnummer und des Dezimalpunkts zu implementieren
Verwenden Sie jQuery, um die Überprüfung der Eingabefeldnummer und des Dezimalpunkts zu implementieren
- WBOYOriginal
- 2024-02-25 17:36:07822Durchsuche
Titel: Verwenden Sie jQuery, um die Überprüfung von Eingabefeldnummern und Dezimalstellen zu implementieren
In der täglichen Webentwicklung ist die Überprüfung von Eingabefeldnummern und Dezimalstellen eine der häufigsten Anforderungen. Durch die Verwendung von jQuery können wir problemlos eine numerische und Dezimalpunktvalidierung des Eingabefelds implementieren. Nachfolgend zeige ich Ihnen ein konkretes Codebeispiel:
Zuerst benötigen wir eine einfache HTML-Struktur, einschließlich eines Eingabefelds:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入框数字和小数点验证</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <input type="text" id="inputBox" placeholder="请输入数字或小数"> </body> </html>
Als nächstes schreiben wir mit jQuery den Code für die Verifizierungsfunktion. Mithilfe der Ereignisüberwachung können wir den Inhalt des Eingabefelds beurteilen und anhand von Bedingungen entscheiden, ob eine Eingabe zulässig ist. Der spezifische Code lautet wie folgt:
$(document).ready(function() {
$('#inputBox').on('input', function() {
var value = $(this).val();
if(value !== '') {
if(/^[0-9]+(.[0-9]+)?$/.test(value)) {
// 是数字或小数，允许输入
console.log("是数字或小数，允许输入");
} else {
// 不是数字或小数，禁止输入
console.log("不是数字或小数，禁止输入");
$(this).val(value.slice(0, -1));
}
}
});
});Im obigen Code verwenden wir das input-Ereignis, um Eingabeänderungen im Eingabefeld zu überwachen. Wenn sich der Wert des Eingabefelds ändert, ermitteln wir zunächst den Wert des Eingabefelds und ermitteln dann mithilfe regulärer Ausdrücke, ob es sich um eine Zahl oder eine Dezimalzahl handelt. Handelt es sich um eine Zahl oder eine Dezimalzahl, ist die Eingabe zulässig, andernfalls wird die Eingabe gesperrt und die fehlerhaften Zeichen werden entfernt.
Durch das obige Codebeispiel haben wir die Überprüfungsfunktion für Eingabefeldnummern und Dezimalstellen erfolgreich implementiert. Wenn Benutzer Zahlen oder Dezimalzahlen in das Eingabefeld eingeben, erhalten sie zeitnah eine Rückmeldung, wodurch Fehleingaben wirksam verhindert werden. Eine solche Funktion ist besonders wichtig in Szenarien, in denen es um Geld oder andere numerische Berechnungen geht, und kann das Benutzererlebnis und die Betriebsgenauigkeit verbessern.
Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um die Überprüfung der Eingabefeldnummer und des Dezimalpunkts zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!