el-input限制只能输入数字 - 不是不爱睡觉 - 博客园

输入框中限制通常有三种处理方法：

第一种：设置type属性（不推荐）

设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现

<el-input  type="number"></el-input>

第二种：在属性中添加onkeyup或者oninput进行正则判断

onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以这样使用

<el-input 
    v-model="form" 
    οnkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

第三种：通过监听事件监听，对于一些特殊要求的输入框可以采用此方法

当输入完毕后检查整段输入值的规则是否符合，如果不符合就设置为空。

因为不知道用户中途会不会输入英文字母，汉字，特殊字符等等不规则字符。

采用第二种方法就会难以判断字符的格式，最后用户确认时说不定会报错。

以手机号码为例（其他格式都一样，都只是换一下正则表达式罢了）

<el-input
     v-model="form.telephone"
     placeholder="请输入11位手机号"
     @change="confirmTelephone">
</el-input>

methods中

confirmTelephone() {
        if (!/^1[0-9]{10}$/.test(this.form.telephone))
          this.form.telephone = '';
 },

一、效果

目前这个el-input 属性只能输入数字。

二、参考资料以及理解

参考资料

操作思路：

1. oninput：这是一个input 输入框在输入内容时会执行的事件（在输入框输入内容时就会触发 oninput）
2. 对输入框内容进行监听，监听输入内容的格式，这里使用正则进行限制操作
3. blur: 监听输入框失去焦点
4. 当输入框失去焦点时，将输入框中的内容进行保存

操作步骤：

1. oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
2. @blur="salaryChange"
3. function salaryChange() {'这里是本地保存输入框内容的变量' = e.target.value}；

三、源码

html 部分

<template>
	<div>
		<el-form>
      <el-form-item label="资金预算" prop="capitalBudget">
        <el-input
              v-model="dataForm.capitalBudget"
              :disabled="disabled"
              placeholder="资金预算"
              :style=demanwidth
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              @blur="salaryChange"
              ></el-input>
       </el-form-item>
		</el-form>  
	</div>
</template>

js 部分

<script>
methods: {
	salaryChange (e) {
      this.dataForm.capitalBudget = e.target.value
    },
}
</script>

<template>
<el-input v-model="number" @input="onlyNbr1" @change="onlyNbr2"/>
</template>

<script>
  data() {
    return {
      number: null
    }
  },
  methods: {
    onlyNbr1(ipt) {
      let data = String(ipt)
      const char = data.charAt(0)
      // 先把非数字的都替换掉
      data = data.replace(/[^\d]/g, '')
      // 如果第一位是负号，则允许添加
      if (char === '-') {
        data = '-' + data
      }
      this.query.filter = data
    },
    onlyNbr2() {
      const data = String(this.query.filter)
      // 如果只有一个负数，那么替换为 null
      console.log(data === '-')
      if (data === '-') {
        this.query.filter = null
      }
    }
  }
}