Element-UI的el-input验证输入是否是数字的总结，不要使用type: ‘number‘

我的需求是input只能输入数字，整数、小数都可以，不能是空
本以为是一个简单需求，但在实现过程中遇到了很多问题，特此记录一下
由于前端使用了Elment-UI，所以

第一步
方案：在el-input上加入:rules，rules如下
rules: [{ type: ‘number’, required: true, trigger: ‘blur’, message: ‘please type a number’ }
问题：任何输入都会被认为是不是数字，无论是字母还是数字都提示不是数字
原因：el-input的v-model没有:number的修饰，所以rules收到的是字符串，所以判断错误

第二步：改进
方案：在el-input的v-model加入:number的修饰
问题：el-input只能输入整数，不能输入小数点。查一下el-element就是这么设计的，但这不符合需求

第三步：再改进
方案：不使用element-ui的type: ‘number’，而是自定义检验器，同时去掉v-model的:number的修饰
rules: [{ validator: validateNumber, trigger: ‘blur’ }]

   var validateNumber = (rule, value, callback) => {
      console.log('value:' + value)
      if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }

需要注意的是validateNumber 要写的data里面，但不能写在return里面
使用正则表达式，验证输入的字符是不是数字，且只允许输入一个小数点

网上有许多人建议加在里的onput事件检查，但这样需要再每个input都要加入，一旦要修改，工作量巨大，还容易出错。如果为了这个小功能再封装一个标签，则得不偿失了

由于经验不足，解决以上问题花了一些功夫，特此写出来给新手们参考，高手可以忽略