用jQuery編寫實作輸入框數字和小數點驗證-js教程-PHP中文網

用jQuery編寫實作輸入框數字和小數點驗證

WBOY

發布： 2024-02-25 17:36:07

原創

831 人瀏覽過

用jQuery編寫實作輸入框數字和小數點驗證

標題：使用jQuery實作輸入框數字和小數點驗證

在日常的網頁開發中，輸入框數字和小數點的驗證是常見的需求之一。透過使用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事件來監聽輸入框的輸入變化。當輸入框的值改變時，我們先取得輸入框的值，然後使用正規表示式來判斷是否為數字或小數。如果是數字或小數，則允許輸入；如果不是，則阻止輸入並將錯誤的字元刪除。

透過上面的程式碼範例，我們成功實現了輸入框數字和小數點的驗證功能。當使用者在輸入框中輸入數字或小數時，會得到及時的回饋，有效防止了錯誤輸入的發生。這樣的功能在涉及金錢或其他數值計算的場景中尤其重要，能夠提高使用者體驗和操作的準確性。

以上是用jQuery編寫實作輸入框數字和小數點驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！