Home >Web Front-end >JS Tutorial >Use jQuery to implement input box number and decimal point verification

Use jQuery to implement input box number and decimal point verification

WBOYOriginal: 2024-02-25 17:36:07881browse

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>

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

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!

jquery 正则表达式 html 事件 input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery to flatten elementsNext article：Use jQuery to flatten elements

See more

Use jQuery to implement input box number and decimal point verification

Related articles