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

(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )

通过@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输入时限制输入的类型操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：浅谈vue 多个变量同时赋相同值互相影响
下一篇：vue data变量相互赋值后被实时同步的解决步骤