其他分享
首页 > 其他分享> > el-input限制只能输入数字

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

 

标签:el,oninput,form,输入框,onkeyup,input,type,输入
来源: https://www.cnblogs.com/oaoa/p/15131664.html