Vue限制输入内容 / 正则

通过正则限制用户输入内容的几种方式

1.watch监听
已知model — inputIntegarl

<el-input v-model="inputIntegarl" style="width: 120px"></el-input>

watch用法自行了解，通过输入内容赋值model的形式，将用户输入的内容转换，即实现限制用户输入的结果
this.$common.reg 是我自定义的公用方法

inputIntegarl(val){
        let reg = /^[0-9]{0,9}$/;
        let Str = this.$common.reg(reg,val,10);
        this.inputIntegarl = Str;
      }

/**
 * 公用字符校验
 * reg 传入正则
 * val 传入内容
 * index 传入限制字符长度
 * */
  reg(reg,val,index){
    let returnEd = '';
  if (val.length >= index){
    returnEd = val.slice(0,index - 1)
    } else {
      if (reg.test(val)){
        returnEd = val
      } else {
        returnEd = ''
    }
  }
  return returnEd
  },

2.@input
所执行的过程类似监听，先接收到用户输入的内容，然后将内容赋值给model，实现限制输入的结果

<el-input v-model="inputIntegarl" style="width: 120px" @input='getInput()'></el-input>

method:{
	getInput(e){
		this.inputIntegarl = e.target.value.replace(/^[0-9]{0,9}$/)
	}
}

3.@keyup
上同类似执行过程

<el-input v-model="inputIntegarl" style="width: 120px" @keyup='getInput()'></el-input>

method:{
	getInput(){
		this.inputIntegarl = this.inputIntegarl.replace(/^[0-9]{0,9}$/)
	}
}

4.直接在el-input上限制

<el-input v-model="inputIntegarl" style="width: 120px" oninput="if(value.length>11)value=value.slice(0,11)"></el-input>

欢迎补充