Home >Web Front-end >JS Tutorial >Use jQuery to simply verify that input content is numbers and decimal points

Use jQuery to simply verify that input content is numbers and decimal points

PHPz
PHPzOriginal
2024-02-24 14:30:10716browse

Use jQuery to simply verify that input content is numbers and decimal points

Title: Simple implementation of jQuery to verify that the input content is numbers and decimal points

In web development, form validation is an essential part. In certain cases, it may be necessary to verify that the input is numeric or contains a decimal point. This article will introduce how to use jQuery to implement this function, and use simple code examples to verify input content.

  1. HTML code:

First, we need to define an input box in HTML for users to input content. According to requirements, we can add an id attribute to the input box to facilitate subsequent acquisition of the value of the input box through jQuery. The following is a simple example:

<input type="text" id="inputNumber">
  1. jQuery code:

Next, we use jQuery to monitor changes in the content in the input box and verify it. We will use a regular expression to determine if the input is a number or contains a decimal point.

$(document).ready(function(){
    $('#inputNumber').on('input', function(){
        var inputValue = $(this).val(); // 获取输入框的值
        var regExp = /^[0-9.]+$/; // 正则表达式,匹配数字和小数点
        
        if(!regExp.test(inputValue)){
            alert('请输入数字或小数点'); // 如果不符合要求,则弹出提示
            $(this).val(''); // 清空输入框的值
        }
    });
});

In the above code, we use jQuery's on method to listen to the input event of the input box, which is triggered when the user enters content. Then use the val() method to get the value of the input box, and use regular expressions for matching verification. If the content entered by the user does not meet the requirements, a prompt will pop up and the value of the input box will be cleared.

Through the above code example, we have implemented a simple jQuery function to verify that the input content is numbers and decimal points. When the content entered by the user does not meet the requirements, prompts are given in a timely manner to improve the user experience. In actual projects, the verification rules can be adjusted according to needs to meet specific verification requirements.

The above is the detailed content of Use jQuery to simply verify that input content is numbers and decimal points. For more information, please follow other related articles on the PHP Chinese website!

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