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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
js单例模式的两种方案
Oct 22 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
Javascript 学习书 推荐
2009/06/13 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python如何查看系统网络流量的信息
2016/09/12 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python初学者常见错误详解
2019/07/02 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Django操作session 的方法
2020/03/09 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python 绘制可视化折线图
2020/07/22 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
车辆委托书范本
2014/10/05 职场文书
法人身份证明书
2014/10/08 职场文书
2014年团工作总结
2014/11/27 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
初中体育教学随笔
2015/08/15 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android