Vue怎么实现数值型输入框并限制长度

蜗牛 互联网技术资讯 2022-05-31 86 0

这篇文章主要介绍了Vue怎么实现数值型输入框并限制长度的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue怎么实现数值型输入框并限制长度文章都会有所收获,下面我们一起来看看吧。

vue数值型输入框并限制长度

描述

原有的 <el-input type="number" /> 个人觉得存在问题,maxlength 属性无法生效,其次 max 属性虽然能够限制,但是无法阻止用户手动输入,因此依然存在 bug

代码

改为正则表达式方式

<el-input v-model="form.level" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="10" 
show-word-limit clearable />

vue输入框限制各种输入格式

1.限制只能输入数字、带小数点的数字

<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>
// 限制只能输入数字、带小数点的数字、小数点保留5位,想要小数点后保留多少位,可将{0,5}中的5改为对应的位数,例如保留1位:{0,1}
onInput(key, event){
   this.form[key] = event.match(/^\d*(\.?\d{0,5})/g)[0]
}

2.限制输入的只能为11位手机号

<el-input v-model="form.phone" maxlength="11" @input="onInput('keyName', $event)"></el-input>
// 首先限制它只能输入整数,最大长度为maxlength="11",其次是当它输入长度达到11位时进行校验
onInput(key, event){
   this.form[key] = event.replace(/[^\d]/g,'')
   if(event.length >= 11) {
       const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
       if(!reg.test(event)) {
            console.log('您输入的手机号不正确')
       }
   }
}

3.电子邮箱正则

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

4.身份证正则

// 身份证普通的校验
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
// 18位身份证精准校验
 /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

关于“Vue怎么实现数值型输入框并限制长度”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue怎么实现数值型输入框并限制长度”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论