素材巴巴 > 程序开发 >

如何去判断一个input输入框中的输入为数字?

程序开发 2023-09-06 08:36:14

问题描述:

        这是个自己在公司做项目的时候碰到的问题,起因是产品要求input输入框中只能是数字,要是位数不对,得提示用户,输入了非法的字符,也得提示用户。

解决过程:

        本来用的是isNaN,但是总是觉得效果不好,然后就去网上找其他方法,于是想到了正则,但是我一直没法用正则解决。

解决办法:

        最终还是回归到isNaN上。先贴出w3c中对于isNaN的描述:

 

         也就是说,它的字面意思就是问你:“括号里的数,它是不是不是一个数字?”,如果返回值为true,也就是它:“不是一个数字”,反之就是:“它是一个数字”

        感觉我在说废话,但是对于初学的人有可能就会出错。这个函数真的是简单粗暴,然后为你的input输入框绑定一个oninput事件。

        其中,oninput事件和另外一个onchange事件有一点细微的区别,概括来讲就是oninput是即时出结果的,而onchange是秋后算账的,是你的操作完成之后才出结果的,很显然,前者更加适合我们当前场景,我们就相当于使用这个方法监听输入框的输入,而且是即时出结果的,逻辑就写在你的oninput方法里面就行了。

        这个oninput事件绑定了之后,你在其内部使用isNaN,只要你输入的一不是数字就能检测出来,比如你输入了一个字母或者其他符号,马上就能有结果,很符合预期的需求。

        以下有一些输入的例子:

1.   D或其他字母     报错

2.   1     不报错

3.   12.    不报错,应该是自动解析成12.0或者是12了。即将12.也看作是一个正确的数字

4.    12..  报错,不符合数字的格式,当然报错

5. 00.     不报错  js会将00.解析成0.(我的猜测)

6. 0..    报错

       本博文只是为了帮助一些初学者,或者是遇到相关方面的问题但是找不到好的解决办法的人,大佬请绕道


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。