vue. js input box input value automatic filtering punctuation operation in special character replacement

  • 2021-08-09 07:04:22
  • OfStack

I won't talk too much, let's just look at the code ~

< Input v-model= "relatedWords" type= "textarea" placeholder= "Please enter" @ input= 'verifyInput (formItem. relatedWords)'/ >


verifyInput(v){
  let _this=this;
  let punctuation = /[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\] · ~ ! @# $ % ... & - \-={}| ""? : "" "" ","; ' ' . , ]/im;
  let arr=v.split('')
  let str=''
  arr.map(i=>{
    if(!punctuation.test(i)){
     str+=i
    }
  })
  str=str.replace(/ ( /g,'(')
  str=str.replace(/ ) /g,')')
  str=str.replace(/ , /g,',')
  this.$nextTick(j=>{
    this.relatedWords=str
  })
},

Additional knowledge: vue el-input No special characters can be entered, only digit regular verification can be entered

I won't talk too much, let's just look at the code ~


<el-input
 size="small"
 v-model="city"
 placeholder=" Please enter a city name "
 @blur="addCity(scope.$index)"
 @keyup.native="btKeyUp"
 @keydown.native="btKeyDown"
></el-input>
 
// methods Inside  
 
   //  You can only enter Chinese characters, English and numbers 
  btKeyDown(e) {
    e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
  },
  // Restrict the input of special characters 
  btKeyUp(e) {
    e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\] · ~ ! @# $ % ... &* ()- \-+={}| ""? : "" "" ","; ' ' ,. , ]/g,"");
  }

Events such as keyup in el-input need to be added. native otherwise the event cannot be executed normally

The following are numbers only


 <el-input
  size="small"
  v-model="scope.row.order_number"
  v-show="scope.row.isShowInp_order"
  @blur="editOrder(scope.$index,scope.row)"
  v-focus
  @keyup.native="UpNumber"
  @keydown.native="UpNumber"
  class="table_input"       
></el-input>  
 
//  Only numbers can be entered  
  UpNumber(e) {
    e.target.value = e.target.value.replace(/[^\d]/g,"");
  }

Related articles: