input输入内容处理

1. 输入框不能输入特殊字符
   在vue mian.js全局定义方法

//全局定义输入框的特殊字符处理
Vue.prototype.validForbid = function (value) {
 value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
 return value;
}

使用方法

<el-input 
           oninput="value=value"
           :value="ruleForm.password"
           @input="e=>ruleForm.password = validForbid(e)"
            show-password>
</el-input>

2. 输入框只能输入数字

<el-input 
   		v-model='input'
           oninput="value=value.replace(/[^\d]/g, '')">
</el-input>

2. 输入框只能英文大小写和数字

 只允许输入英文大小写和数字
<el-input 
            oninput="value=value"
           :value="ruleForm.bank"
           @input="e=>ruleForm.bank = validForbid(e).replace(/[\u4E00-\u9FA5]/g,'')"
</el-input>

3. 首位不能为0

 oninput="value=value.replace(/^[0]+[0-9]*$/gi, '')"

只能输入纯数字最好解决方法
在 main.js定义代码

Vue.directive('enterNumber', {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }
      }
    });
  }
})

组件直接使用

<el-input v-enter-number type="number" v-model="number" ></el-input>

//watch对输入框的处理
 data() {
    return {
      proportion: "",
    };
  },
  watch: {
    proportion(newVal) {
      console.log(newVal);
      let a = newVal.split("");
      if (!/^(\-)?(\d+)(\.(\d{0,2}))?$/.test(newVal)) {
        a.pop();
        a = a.join("");
        this.proportion = a;
      }
      let c = a.toString().replace(/,/g, "");
      if (c <= -1) {
        this.proportion = "";
      }
      if (c == "00") {
        this.proportion = 0;
      }
      if (c > 100) {
        this.proportion = 100;
      }
    },
  
    
  },