ホームページ > 記事 > ウェブフロントエンド > jQueryを使用して入力ボックスの数値と小数点の検証を実装する
jQueryを使用して入力ボックスの数値と小数点の検証を実装する
- WBOYオリジナル
- 2024-02-25 17:36:07822ブラウズ
タイトル: jQuery を使用して入力ボックスの数値と小数点を検証する
日常の Web 開発では、入力ボックスの数値と小数点の検証は一般的な要件の 1 つです。 jQuery を使用すると、入力ボックスの数値と小数点の検証を簡単に実装できます。以下に具体的なコード例を示します。
まず、入力ボックスを含む単純な HTML 構造が必要です。
<!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>
次に、jQuery を使用して検証関数コードを記述します。イベントリスニングを使用して、入力ボックスの内容を判断し、条件に基づいて入力を許可するかどうかを決定できます。具体的なコードは次のとおりです。
$(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));
}
}
});
}); 上記のコードでは、input イベントを使用して、入力ボックス内の入力の変更を監視します。入力ボックスの値が変更されると、まず入力ボックスの値を取得し、次に正規表現を使用してそれが数値であるか 10 進数であるかを判断します。数値または 10 進数の場合は入力が許可されますが、そうでない場合は入力がブロックされ、誤った文字が削除されます。
上記のコード例により、入力ボックスの数値と小数点の検証機能を実装することができました。ユーザーが入力ボックスに数値または小数を入力すると、タイムリーなフィードバックが受け取られるため、誤入力を効果的に防止できます。このような機能は、金銭やその他の数値計算を伴うシナリオでは特に重要であり、ユーザー エクスペリエンスと操作精度を向上させることができます。
以上がjQueryを使用して入力ボックスの数値と小数点の検証を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。