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

33次阅读

共计 636 个字符，预计需要花费 2 分钟才能阅读完成。

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

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
  
    },

正文完