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 读取元素的CSS信息的代码
Feb 07 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
移动节点的jquery代码
Jan 13 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
微信小程序开发探究
Dec 27 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 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 EOT定界符的使用详解
2008/09/30 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python 从相对路径下import的方法
2018/12/04 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python处理session的方法整理
2019/08/29 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
结构工程个人自荐信范文
2013/11/30 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
2015年妇女工作总结
2015/05/14 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python