乐趣区

关于vue.js:vueelement-动态表单对输入框elinput-输入校验只能输入数字和小数点

动静表单,校验只能输出数字和小数点

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
  
    },
退出移动版