Maison > Article > interface Web > Utilisez jQuery pour implémenter le numéro de la zone de saisie et la vérification du point décimal
Utilisez jQuery pour implémenter le numéro de la zone de saisie et la vérification du point décimal
- WBOYoriginal
- 2024-02-25 17:36:07821parcourir
Titre : Utilisez jQuery pour implémenter la vérification du numéro de zone de saisie et du point décimal
Dans le développement Web quotidien, la vérification des numéros de zone de saisie et du point décimal est l'une des exigences courantes. En utilisant jQuery, nous pouvons facilement implémenter la validation numérique et décimale de la zone de saisie. Ci-dessous, je vais vous montrer un exemple de code spécifique :
Tout d'abord, nous avons besoin d'une structure HTML simple, comprenant une zone de saisie :
<!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>
Ensuite, nous utilisons jQuery pour écrire le code de la fonction de vérification. Nous pouvons utiliser l'écoute d'événements pour juger du contenu de la zone de saisie et décider d'autoriser ou non la saisie en fonction de conditions. Le code spécifique est le suivant :
$(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));
}
}
});
});Dans le code ci-dessus, nous utilisons l'événement input pour surveiller les modifications d'entrée dans la zone de saisie. Lorsque la valeur de la zone de saisie change, nous obtenons d'abord la valeur de la zone de saisie, puis utilisons des expressions régulières pour déterminer s'il s'agit d'un nombre ou d'un nombre décimal. S'il s'agit d'un nombre ou d'un nombre décimal, la saisie est autorisée ; sinon, la saisie est bloquée et les caractères erronés sont supprimés.
Grâce à l'exemple de code ci-dessus, nous avons implémenté avec succès la fonction de vérification des numéros de zone de saisie et des points décimaux. Lorsque les utilisateurs saisissent des nombres ou des décimales dans la zone de saisie, ils reçoivent un retour en temps opportun, empêchant ainsi les saisies incorrectes. Une telle fonction est particulièrement importante dans les scénarios impliquant de l'argent ou d'autres calculs numériques, et peut améliorer l'expérience utilisateur et la précision opérationnelle.
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!