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

 更新时间:2022年05月31日 14:18:14   作者:乐之终曲  
这篇文章主要介绍了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]$/

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3自定义drag指令详解

    Vue3自定义drag指令详解

    这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Vue-cli配置打包文件本地使用的教程图解

    Vue-cli配置打包文件本地使用的教程图解

    这篇文章主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • ant design vue 清空upload组件图片缓存的问题

    ant design vue 清空upload组件图片缓存的问题

    这篇文章主要介绍了ant design vue 清空upload组件图片缓存的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 注释template中组件的属性说明

    vue 注释template中组件的属性说明

    这篇文章主要介绍了vue 注释template中组件的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue Element前端应用开发之功能点管理及权限控制

    Vue Element前端应用开发之功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,权限功能点是针对角色进行控制的,也就是简称RBAC(Role Based Access Control)。
    2021-05-05
  • nuxt引入组件和公共样式的操作

    nuxt引入组件和公共样式的操作

    这篇文章主要介绍了nuxt引入组件和公共样式的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    这篇文章主要为大家详细介绍了vue配置nprogress实现页面顶部进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • axios拦截设置和错误处理方法

    axios拦截设置和错误处理方法

    下面小编就为大家分享一篇axios拦截设置和错误处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue项目同时兼容pc和移动端的解决方式

    vue项目同时兼容pc和移动端的解决方式

    我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue中实现拖拽排序功能的详细教程

    vue中实现拖拽排序功能的详细教程

    在业务中列表拖拽排序是比较常见的需求,下面这篇文章主要给大家介绍了关于vue中实现拖拽排序功能的详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论