判断一个数是否是整数且不带符号和空格符！！

最新推荐文章于 2020-08-22 15:12:27 发布

qaz134712

最新推荐文章于 2020-08-22 15:12:27 发布

阅读量246

点赞数

分类专栏： javascript基础文章标签： js判断整数 isNaN parseInt 符号

本文链接：https://blog.csdn.net/qaz134712/article/details/90105167

版权

javascript基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

判断一个数是否是整数且不带符号和空格符！！

老师不让用css type=‘number’!!!

isNaN(oInput1.value) || isNaN(parseInt(oInput1.value)) || isNaN(oInput1.value[0])

案例：

在这里插入图片描述

<body>
    请输入QQ号码：<input type="text" /> <input type="button" name="" value="提交"> <span id="tips" style="color: red; "></span><br>
    1. 有没有输入；<br />
    2. 输入的是不是数字；<br />
    3. 不能是小数；<br />
    4. 输入的数字必须在5位以上、10位以内。
    <script>
        var oInput1 = document.getElementsByTagName('input')[0],
            oInput2 = document.getElementsByTagName('input')[1];
        var oTips = document.getElementById('tips');
        
        oInput2.onclick =  () => {
            console.log(oInput1.value)
            if (oInput1.value == '') {
                oTips.innerHTML = '不能为空';
                 oTips.style.color = 'red';
                return;
            }
            if (isNaN(oInput1.value) || isNaN(parseInt(oInput1.value)) || isNaN(oInput1.value[0]) ) {
                 oTips.innerHTML = '请输入数字';
                 oTips.style.color = 'red';
                 oInput1.value = '';
                 return;                        //isNaN(oInput1.value[0]) 用来排除带符号的整数
            }
            if (parseInt(oInput1.value) != parseFloat(oInput1.value)) {
            // if (!Number.isInteger(oInput1.value)) { //input value值获得为字符串 Number.isInteger('123') -> false
                 oTips.innerHTML = '请不要输入小数';
                 oTips.style.color = 'red';
                 oInput1.value = '';
                 return;
            }
            if ((oInput1.value).length >= 10 || (oInput1.value).length <= 5) {
                oTips.innerHTML = '请输入正确的位数';
                 oTips.style.color = 'red';
                 oInput1.value = '';
                 return;
            }
            oTips.innerHTML = '通过';
            oTips.style.color = 'green'；
        }
    </script>
</body>

总结：

**
1. Number.isNaN() 解决了对string的判断 => 直接false；即，传入值不做隐式转换，当只有数字类型才会进行“真正的”isNaN判断。

    Number.isNaN('1000') --> false
    Number.isNaN(   )   --> false
    Number.isNaN(' ') --> false
    Number.isNaN('>') --> false
    
    isNaN('1000') --> false
    isNaN('>') --> true
    isNaN( ) --> true
    isNaN('') --> false
    isNaN('   ') --> false
    isNaN(     ) --> true`

2. input通过value获取的值都是以字符串的形式进行后续操作的; Number.isInteger()仅对数字类型有效，也就是说，没法对input.value进行判断

Number.isInteger('1000')  --> false

3. isNaN(parseInt(oInput1.value)) 用来排除空字符串像’ 100’等
isNaN(oInput1.value) 用来排除像1000px这类的字符
isNaN(oInput1.value[0]) 用来排除带符号的整数

 isNaN(parseInt('   '))  -->true
 isNaN(parseInt(  ))  -->true

4. 那么。判断input输入框，输入的是否是数字，js方法是：

if (isNaN(oInput1.value) || isNaN(parseInt(oInput1.value)) || isNaN(oInput1.value[0]) ) {
           oTips.innerHTML = '请输入数字';
           oTips.style.color = 'red';     //isNaN(parseInt(oInput1.value)) 用来排除空字符串等
           oInput1.value = '';            //isNaN(oInput1.value) 用来排除 像1000px这类的字符
           return;                        //isNaN(oInput1.value[0]) 用来排除带符号的整数
 }

5. 判断是否为小数，js方法是:

if (parseInt(oInput1.value) != parseFloat(oInput1.value)) {
       oTips.innerHTML = '请不要输入小数';
       oTips.style.color = 'red';
       oInput1.value = '';
       return;
 }