vue+element 动态表单，对输入框el-input 输入校验，只能输入数字和小数点

动态表单，校验只能输入数字和小数点

1.我们知道， 对原生的input 输入校验是：

<input onkeyup="value=value.replace(/[^\d]/g, '')" />

2.那对element 组件input 的校验， 就得用它的对应事件了

<el-input 
                      placeholder="请输入ip" 
                      v-model="formData.ip"
                      @input="validIp"
                      ></el-input>

validIp(val){
  this.formData.ip = value.replace(/[^\d.]/g, '')
}

3.那么， 是动态的input 呢， 我这里实现了一个方案。就是在校验方法中， 把input #id 传过去，id中含index 下标信息， 通过document.getElementById(#id) 获取value

<el-input 
                      placeholder="请输入ip" 
                      :id="'ip_'+index"
                      v-model="formData.ips[index]"
                      @input="validIp('ip_'+index)"
                      ></el-input>

validIp(inputId){
      let index = inputId.split("_")[1]
      let dom = document.getElementById(inputId)
      let temp = dom.value
      temp = temp.replace(/[^\d.]/g, "")
      this.formData.ips[index]=temp
  
    },