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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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&amp;mysql(五)
2006/10/09 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python同时处理多个异常的方法
2020/07/28 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
《埃及的金字塔》教学反思
2014/04/07 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年德育工作总结
2014/11/20 职场文书
驾驶员管理制度范本
2015/08/06 职场文书