el-input限制只能输入数字

输入框中限制通常有三种处理方法:

第一种:设置type属性(不推荐)

设置type属性为number,text等等,此方法输入框的后面会有不必要样式出现

<el-input  type="number"></el-input>

第二种:在属性中添加onkeyup或者oninput进行正则判断

onkeyup,oninput,onchange各有好坏,在这里,推荐onkeyup,在要求不是太高的系统中可以这样使用

<el-input 
    v-model="form" 
    onkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

第三种:通过监听事件监听,对于一些特殊要求的输入框可以采用此方法

当输入完毕后检查整段输入值的规则是否符合,如果不符合就设置为空。

因为不知道用户中途会不会输入英文字母,汉字,特殊字符等等不规则字符。

采用第二种方法就会难以判断字符的格式,最后用户确认时说不定会报错。

以手机号码为例(其他格式都一样,都只是换一下正则表达式罢了)

<el-input
     v-model="form.telephone"
     placeholder="请输入11位手机号"
     @change="confirmTelephone">
</el-input>

methods中

confirmTelephone() {
        if (!/^1[0-9]{10}$/.test(this.form.telephone))
          this.form.telephone = '';
 },

————————————————————————————

文章参考:https://www.cnblogs.com/dalingxuan/p/14238556.html?ivk_sa=1024320u

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue Element UI中,可以使用el-input和type属性来限制只能输入数字类型。例如,可以将type属性设置为"number",这样输入框就只能接受数字输入。这样做可以解决输入其他字符后无法正确获取新输入值的问题。引用已经提到了这种方法,并指出当输入其他字符时,输入框会被置空。此外,引用中也提到了方法二,即使用<el-input type="number" />来实现数字输入限制。所以,你可以尝试在el-input组件中添加type="number"属性来限制只能输入数字类型。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue elemen ui el-input 限制只能输入数字类型](https://blog.csdn.net/ymumi/article/details/103275131)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [前端vue elementuiel-input只能输入数字](https://blog.csdn.net/qq_53030245/article/details/123852481)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值