解决element-ui表单中限制输入纯数字的问题

先看需求：

1. 必填

2. 只能输入纯数字（e也不行）

3. 记录已输入字符长度

---

遇到的问题

el-input自带原生的 type="number"存在两个问题：

1. 首先，type="number"允许输入e

2. 其次，maxlength属性也不生效

---

解决办法

<template>
    <el-input  maxlength="30"
               v-model="pureNumber"
               placeholder="请输入纯数字">
    <div class="input-limit">{{pureNumber.length}}/30</div>
</template>
<script>
    watch:{
        'pureNumber': function (curVal, oldVal) {
                            if (!curVal) {
                                this.pureNumber = ''
                                return false
                            }
                            // 实时把非数字的输入过滤掉
                            this.pureNumber = curVal.match(/\d/ig) ? curVal.match(/\d/ig).join('') : ''
                        }
    }
</script>
复制代码

这时候又遇到一个问题，el-input没有实时变化，看了一下源码，是const引起的，所以弃用el-input用原生input标签，加上element的样式，看起来和el-input一样。这时候就解决了双向绑定的问题

     <input class="el-input__inner" 
            maxlength="30"
            v-model="pureNumber"
            placeholder="请输入纯数字">
复制代码

---

注意一下

<el-form-item label="纯数字：" prop="pureNumber">
    <input  class="el-input__inner" 
            maxlength="30"
            v-model="pureNumber"
            placeholder="请输入纯数字">
    <div class="input-limit">{{pureNumber.length}}/30</div>
</el-form-item>
复制代码

此时el-form-item中的prop对于原生input是没有验证功能的，所以我们手动验证，模拟el-input的验证行为，主要通过给input标签加@blur监听失去焦点事件

---

举个例子

模拟blur验证必填的功能，这是element的写法

rules:{
    pureNumber:[
        {
            required: true,
            message: '请完成必填项',
            trigger: 'blur'
        }
    ]
}
复制代码

我们要这样写

<el-form-item label="纯数字：" prop="pureNumber" ref="numberElement">
    <input  class="el-input__inner" 
            maxlength="30"
            v-model="pureNumber"
            placeholder="请输入纯数字"
            @blur="handleBlur">
    <div class="input-limit">{{pureNumber.length}}/30</div>
</el-form-item>

methods:{
    handleBlur(e){
         let xxx = this.$refs['numberElement'].$el
         if (event.target.value === '') {
            // 输入框变红色
            xxx.classList.add('is-error')
            xxx.classList.remove('is-success')
        } else {
            // 输入框变绿色
            xxx.classList.add('is-success')
            xxx.classList.remove('is-error')
        }
    }
}
复制代码

---

以上只是模拟了输入框变色，模拟提示信息你们就自行解决吧。

我项目里还处理了模拟input验证和整个表单验证的冲突，整个表单验证前要把模拟的验证去掉，不然会有两个'请完成必填项'