昨天博主接到一个需求说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这个参数,我给大家解释一下: