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]$/

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

相关文章

  • Vue Echarts实现带滚动效果的柱形图

    Vue Echarts实现带滚动效果的柱形图

    这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3中如何实现定义全局变量

    vue3中如何实现定义全局变量

    这篇文章主要介绍了vue3中如何实现定义全局变量,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue router传递参数并解决刷新页面参数丢失问题

    Vue router传递参数并解决刷新页面参数丢失问题

    这篇文章主要介绍了Vue router传递参数并解决刷新页面参数丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue+高德地图实现地图搜索及点击定位操作

    vue+高德地图实现地图搜索及点击定位操作

    这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 深入了解vue中一键复制功能的实现

    深入了解vue中一键复制功能的实现

    在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下
    2023-11-11
  • vue中的生命周期及钩子函数

    vue中的生命周期及钩子函数

    这篇文章主要介绍了vue中的生命周期及钩子函数,Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染,下面文章详细介绍,需要的朋友可以参考一下
    2021-12-12
  • nginx+vue.js实现前后端分离的示例代码

    nginx+vue.js实现前后端分离的示例代码

    这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue中子组件不能修改父组件传来的Prop值的原因分析

    Vue中子组件不能修改父组件传来的Prop值的原因分析

    在Vue中,父子组件之间通过Prop和Event实现了数据的双向绑定,但是,Vue设计者为什么不允许子组件修改父组件传递的Prop呢,本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
    2023-06-06
  • 保姆级Vue3开发教程分享

    保姆级Vue3开发教程分享

    这篇Vue3开发文档,包含了 Vue3 开发中使用的所有语法,文中的示例代码讲解详细,希望所有像他一样还不熟的伙伴快速上手 Vue3,不会的再不看要遭老罪咯
    2023-04-04
  • Vue $mount实战之实现消息弹窗组件

    Vue $mount实战之实现消息弹窗组件

    这篇文章主要介绍了Vue $mount实现消息弹窗组件的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04

最新评论