Use jQuery to implement input box number and decimal point verification-JS Tutorial-php.cn

Use jQuery to implement input box number and decimal point verification

WBOY

Release： 2024-02-25 17:36:07

Original

876 people have browsed it

Use jQuery to implement input box number and decimal point verification

Title: Using jQuery to verify input box numbers and decimal points

In daily web development, verification of input box numbers and decimal points is one of the common requirements. By using jQuery, we can easily implement numerical and decimal point validation of the input box. Below, I will show you a specific code example:

First, we need a simple HTML structure, including an input box:

<!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>

Copy after login

Next, we use jQuery to write the validation function code. We can use event listening to judge the content of the input box and decide whether to allow input based on conditions. The specific code is as follows:

$(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));
            }
        }
    });
});

Copy after login

In the above code, we use the input event to monitor input changes in the input box. When the value of the input box changes, we first get the value of the input box, and then use regular expressions to determine whether it is a number or decimal. If it is a number or decimal, the input is allowed; if not, the input is blocked and the erroneous characters are removed.

Through the above code example, we successfully implemented the verification function of input box numbers and decimal points. When users enter numbers or decimals in the input box, they will receive timely feedback, effectively preventing incorrect inputs. Such a function is particularly important in scenarios involving money or other numerical calculations, and can improve user experience and operational accuracy.

The above is the detailed content of Use jQuery to implement input box number and decimal point verification. For more information, please follow other related articles on the PHP Chinese website!