el-input 限制只能输数字

el-input 限制只能输数字

方法一：

通过设置type属性：type="number"

<el-input
  maxlength="11"
  type="number"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
></el-input>

但是这种方式一般会影响样式，不建议使用，如图：

方法二：

通过绑定值限制的方式：v-model.number="ruleForm.phone"

但是这种方式会限制一般的数字，但是会影响 maxlength 属性，并且 e 是可以输入的，一般情况可以使用，严格限制的话不建议

方法三：

建议使用

通过对绑定的 value 值进行正则限制：οnkeyup="value=value.replace(/[^\d]/g, ' ')"

绑定一个onkeyup监听事件， /[^\d]/g 是用来匹配所有非数字内容的正则表达式，将之替换成空字符串，这种方式不会影响任何属性

<el-input
  maxlength="11"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
  oninput="value=value.replace(/[^\d]/g,'')"
></el-input>