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

目录
  • vue数值型输入框并限制长度
    • 描述
    • 代码
  • vue输入框限制各种输入格式
    • 1.限制只能输入数字、带小数点的数字
    • 2.限制输入的只能为11位手机号
    • 3.电子邮箱正则
    • 4.身份证正则

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+iview实现手机号分段输入框

    vue+iview实现手机号分段输入框

    vue + iview 实现一个手机分段的提示框,知识点还没总结,供大家参考,具体内容如下 <template>   <div :class="{'ivu-form-item-error':!valid && dirty && validated}">     <div class="ivu-phone-input ivu-select  ivu-select-multiple ivu-select-default

  • 关于vue中输入框的使用场景总结

    关于vue中输入框的使用场景总结

    目录 输入框的使用场景总结 1. 自动聚焦 2. 如何优雅的实现下面效果 关于输入框的一些操作 输入框的使用场景总结 1. 自动聚焦 第1种方法:使用 $nextTick <input ref="myInput" v-model="text"/> mounted() { this.$nextTick(function () { this.$refs.myInput.focus(); }); }, 第2种方法:自定义 v-focus 指令 为了方便,这里用

  • vue 输入框输入任意内容返回数字的实现

    vue 输入框输入任意内容返回数字的实现

    本文主要介绍了vue 输入框输入任意内容返回数字,具体如下: 输入任意内容只返回数字 // 提取数字 传入数字 export function changeEvent(item) { let nums = item + ""; if (nums === "") { nums = ""; // 空的话 直接返回空 } else { nums = nums.replace(/[^\d|\.]/g, ""); // 提取出来 一定是

  • Vue实现输入框回车发送和粘贴文本与图片功能

    Vue实现输入框回车发送和粘贴文本与图片功能

    目录 实现回车发送 粘贴文本 粘贴图片 总结 上一篇中,我们初步新建了一个可“双向绑定”的聊天输入框,结合实际使用的场景,如果仅仅只是实现了“双向绑定”还不够,还必须处理粘贴文字.图片等功能.本文就在此基础上,继续探讨如何实现回车发送.粘贴文本(包括HTML).粘贴图片等功能.话不多说,咱们开整.contenteditable的元素如何实现“双向绑定”? 实现回车发送 在一个可编辑元素中,默认回车就是换行.但是如果我们要实现回车是“发送”的功能,需要怎么处理呢? 思路:监听键盘事件,如果判断用户

  • Vue实现输入框@功能的示例代码

    Vue实现输入框@功能的示例代码

    目录 前言 成员列表 创建 使用 输入框 获取光标的坐标 保存光标 插入文本 运行结果 总结 前言 前几篇文章中分别介绍了如何实现聊天输入框的双向绑定.回车键发送.粘贴文本图片等功能,本着完善输入框的目的,文本重点介绍聊天框如何实现@功能. 文章回顾: Vue实现contenteditable元素双向绑定的方法详解 Vue实现输入框回车发送和粘贴文本与图片功能 首先需要先理清思路: 成员列表组件,需要根据光标的位置调整,点击成员项时回调成员信息 获取光标的位置坐标(x值,y值) 输入框失焦时记录

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

    目录 vue数值型输入框并限制长度 描述 代码 vue输入框限制各种输入格式 1.限制只能输入数字.带小数点的数字 2.限制输入的只能为11位手机号 3.电子邮箱正则 4.身份证正则 vue数值型输入框并限制长度 描述 原有的 <el-input type="number" /> 个人觉得存在问题,maxlength 属性无法生效,其次 max 属性虽然能够限制,但是无法阻止用户手动输入,因此依然存在 bug 代码 改为正则表达式方式 <el-input v-mode

  • vue遍历生成的输入框 绑定及修改值示例

    对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作.这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义. 思路 获取生成的输入框数量 初始化数组,数组的长度与待绑定输入框数量一致 将每一个输入框的v-model与数组特定项进行绑定 实现代码 1.data中定义一个存放model值的空数组 data() { return { inputData :[] } } 2.将获取到的数组遍历,将获取到的值插入空数组 res.data.rows.map(v.

  • R语言因子型数值转数值型的操作

    一直觉得只要是数字,不管是什么类型的,都可以通过as.numeric()函数转换为对应的numeric类型的数字,例如 x<-"123",x为character类型,而as.numeric(x)则为numeric类型的123. 但是因子(factor)类型却不一样. a<-factor(c(100,200,300,301,302,400,10)),它们的值分别为100 200 300 301 302 400 10,然而 as.numeric(a)对应的值并非100 200

  • pandas如何将表中的字符串转成数值型

    目录 pandas将表中的字符串转成数值型 扩展:pandas 把某一列中字符串变数值_Pandas对文本数据处理 一.str属性 二.替换和分隔 三.提取子串 1.提取第一个匹配的子串 四.生成哑变量 pandas将表中的字符串转成数值型 在用pd.read_csv读数据时,将要转换数据类型的列名和类型名构成字典,传给dtype import numpy as np import pandas as pd path = 'house_data.csv' col = ['CRIM', 'ZN',

  • javascript下数值型比较难点说明

    1.数字长长的,在c#里合法的长整型数字在javascript下竟然...... 看下面几行简单代码: 复制代码 代码如下: var a = 2010060612120909191; //按时间生成的Id1 var b = 2010060612120909199; //按时间生成的Id2 alert(a == b); //alert(a); //有什么惊人发现吗? //alert(b); //最后几位好像... //alert(Number(a) == Number(b)); //alert(p

  • 利用Python将数值型特征进行离散化操作的方法

    如下所示: data = np.random.randn(20) factor = pd.cut(data,4) pd.get_dummies(factor) 0 0 0 0 1 1 1 0 0 0 2 0 0 0 1 3 0 0 1 0 4 1 0 0 0 5 0 1 0 0 6 0 1 0 0 7 0 1 0 0 8 0 0 1 0 9 0 1 0 0 10 0 0 0 1 11 0 1 0 0 12 0 1 0 0 13 0 0 1 0 14 0 0 1 0 15 0 1 0 0 16 0

  • vue element-ui实现input输入框金额数字添加千分位

    在util.js中定义方法 包含金额添加过滤千分位,验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,");

  • Vue 实现分页与输入框关键字筛选功能

    分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table"> <div class="order-list-header">订单列表</div> <div class="back-box"> <div class="search-box">&l

  • Python导入数值型Excel数据并生成矩阵操作

    riginal_Data 因为程序是为了实现对纯数值型Excel文档进行导入并生成矩阵,因此有必要对第五列文本值进行删除处理. Import_Data import numpy as np import xlrd def import_excel_matrix(path): table = xlrd.open_workbook(path).sheets()[0] # 获取第一个sheet表 row = table.nrows # 行数 col = table.ncols # 列数 datamat

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

随机推荐