vue: Type operation that restricts input when el input input

  • 2021-08-06 19:49:30
  • OfStack

Dynamically monitor the type of input through the time of @ keyup. native

1. The mobile phone number can only be a number. If a non-number is entered, it will be emptied directly

2. ID number, except Xx and number, the rest of the 1 law is emptied

3. Based on 1.2, there is also a dynamically created field (that is, v-for). The solution is to use split to form a field array first, and use for loop to find the field in front of the last point, which is convenient to update and render the page with $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)
   }
  },

Important: It is also a necessary point when using this. $set ()


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

The table limits the length of the number entered. If it exceeds the limit, 9999 will be displayed directly


          <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>

Key points:

index (scope. $index) of the table needs to be fetched to the row

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

Additional knowledge: elementUI + vue input box can only input positive integers, not letters e and +-sign

Look at the code ~

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


Related articles: