如何利用正则表达式控制输入框只能输入数字

 时间:2024-11-05 02:34:42

在做项目的过程中,经常要用到输入框,而用户输入值可能不知道应该输入些什么,这时就需溴溢菏确要对输入框的输入内容进行限制。简单有效的方法之一,统潇瘵侃就是利用正则表达式,输入不正确的内容会被清除掉。下面利用一个实例说明控制输入框输入整数、小数和负数,操作如下:

如何利用正则表达式控制输入框只能输入数字

工具/原料

HBuilder

HTML5

CSS

截图工具

浏览器

方法/步骤

1、第一步,打开HBuilder编辑工具,新建静态页面reg.html,如下图所示:

如何利用正则表达式控制输入框只能输入数字

2、第二步,在<body></body>标签元素内插入input输入框水貔藻疽,设置宽度为300px,如下图所示:

如何利用正则表达式控制输入框只能输入数字

3、第三步,在input输入框内添加onkeyup事件,事件里有正则表达式,只要不满足这个正则釉涑杵抑表达式,就会清除输入的内容,如下图所示:

如何利用正则表达式控制输入框只能输入数字

4、第四步,保存编辑的代码,预览该静态页面,查看页面效果并输入值,发现可以输入数字和小数点,其他的都被清除掉,如下图所示:

如何利用正则表达式控制输入框只能输入数字

5、第五步,为了可以输入负数,需要将“-”添加到正则表达式中,如下图所示:

如何利用正则表达式控制输入框只能输入数字

6、第六步,再次预览该静态页面,发现可以输入负数;这个正则表达式有个缺陷,不能控制仅仅输入一个小数点或“-”,如下图所示:

如何利用正则表达式控制输入框只能输入数字

Windows 10操作系统限制配置文件大小 关闭Win7系统空闲的IDE通道 只需十几个技巧让win10变得流畅无比 win10系统开启自带功能保护硬盘数据的方法 win10显示桌面快捷键
热门搜索
末日图片 花鸟图片 群聊图片 工作细胞动漫 2020早安最火图片