vue:el-input输入时限制输入的类型操作


Posted in Javascript onAugust 05, 2020

通过@keyup.native的时间动态监控输入的类型

1.手机号码,只能是数字,如果输入了非数字直接清空

2.身份证号码,除了Xx和数字其余的一律清空

3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面

setDelMsicStr(field,type){
   let props
   let len
   let value
   let newphoestr
   let item = this
   if (field) {
    props = field.split('.')
    len = props.length
    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }
    if(type=="phone"){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, '')
    }else if(type=='idCard'){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, '')
    }
    this.$set(item, props[len - 1], newphoestr)
   }
  },

重点:也是使用this.$set()时必须的点

for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }

表格限制输入的数字长度,超过限定值,直接显示9999

<el-form-item prop="activStoreSellPrice">
           <el-input type="number" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)" v-model.number="scope.row.activStoreSellPrice" :disabled="disabled" min="0" max="99999999"></el-input>
          </el-form-item>

重点:

表格的需要获取到行的index(scope.$index)

@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"

补充知识:elementUI + vue 输入框只能输入正整数 不能输入字母 e 以及+ - 号

看代码吧~

<el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number"></el-input>

以上这篇vue:el-input输入时限制输入的类型操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript prototype属性深入介绍
Nov 27 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
vue 内联样式style中的background用法说明
Aug 05 #Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
You might like
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
JavaScript 原型继承
2011/12/26 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python异常处理操作实例详解
2018/05/10 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
你们项目是如何进行变更控制的
2015/08/26 面试题
入党思想汇报
2014/01/05 职场文书
大学总结自我鉴定
2014/01/18 职场文书
解除劳动合同协议书
2014/04/14 职场文书
一年级评语大全
2014/04/23 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
学校火灾防控方案
2014/06/09 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
支部书记四风对照材料
2014/08/28 职场文书
联欢会开场白
2015/06/01 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
MySQL开启事务的方式
2021/06/26 MySQL
Sql Server之数据类型详解
2022/02/28 SQL Server