el-input类型为number时，没有完全限制住非数字类型（允许输入字母'e'和小数点'.'），该如何解决？

Question

现象如题目中描述，

代码如下：

<el-form-item label="一级渠道码" prop="first_channel_code">
   <el-input type="number" v-model.number="ruleForm.first_channel_code"></el-input>
</el-form-item> ### 问题描述

Answer 1

三种方式：
一、原生

<el-input type="number" :min="0" v-model="form.zs" placeholder="著作总字数(保留两位小数)" clearable style="width:300px;" @keyup.native="form.zs = oninput(form.zs)">
<template slot="append">万字</template></el-input>

//过滤小数点后两位

oninput(val) {
  return val ? val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') : null
}

二、elementui组件自带的el-input-number标签
三、rules的正则验证
phone: [

    {
        required: true,
        message: "请输入手机号码",
        trigger: "blur"
    },
    {
        pattern: /^1[1-9]\d{9}$/,
        message: "手机号码格式不正确",
        trigger: "blur"
    }
],

Answer 2

e和小数点也属于数字的一部分呀，就是原生的input也存在这个问题，要想完全解决只能靠js控制

Answer 3

如果想限制的话可以在watch里面侦听变化来控制非数字类型。

Answer 4

最好的兼容办法就是@input里面写正则，然后添加e字母或者小数点过滤

Answer 5

感谢各位大佬的分享，最后采用的是监听键盘输入事件解决的，代码如下：

<el-form-item label="一级渠道码" prop="first_channel_code">
  <el-input type="number" v-model.number="ruleForm.first_channel_code" @keydown.native="channelInputLimit"></el-input>
</el-form-item>

// bug fix：指定输入类型为number时仍然可以输入字母'e'和小数点'.'（因为也属于数字类型的范围），这里做一下输入限制
channelInputLimit (e) {
  let key = e.key
  // 不允许输入'e'和'.'
  if (key === 'e' || key === '.') {
    e.returnValue = false
    return false
  }
  return true
}