input输入框限制只能输入数字

昨天博主接到一个需求说form表单里面的input输入框有些你得给它限制一下,不要比如有些限制一下只能让他输入数字,不能让客户输入文字或者英文

我这边给大家提供两种方法来实现这个功能,当然,我把相关情况也在这给大家解释一下现象:

1.相信很多前端框架都集成了第三方的组件库,我这边例举一下我项目中用到的iview

iview有一个数字输入文本框:

<InputNumber :max="10" :min="1" v-model="value1"></InputNumber>

这是最简单的一种方法,但是很多情况下由于样式等等其他因素,导致你无法使用组件库的现用组件功能,这边我给大家提供了第二种方式

2.正则表达式判断法

第二种方式就是正则表达式判断法:

oninput="this.value=this.value.replace(/^\D*([0-9]\d*\.?\d*)?.*$/,$1)"

注意:正则表达式判断法需要使用原生的input输入框,用iview的输入框或者element的输入框应该都没不起效果的

这个正则表达式的意思就是现在英文和文字的输入

大家可以看到 oninput这个参数,我给大家解释一下:

鼠标事件

onclick: 当用户点击某个对象时调用的事件句柄。oncontextmenu: 在用户点击鼠标右键打开上下文菜单时触发ondblclick: 当用户双击某个对象时调用的事件句柄。onmousedown: 鼠标按钮被按下。onmouseenter: 当鼠标指针移动到元素上时触发onmouseleave: 当鼠标指针移出

如果觉得《input输入框限制只能输入数字》对你有帮助，请点赞、收藏，并留下你的观点哦！