el-input的正则表达式+if判断实现百分比输入（保留两位小数，总值大于0小于100）

项目场景：

        因为要记录设计金额的部分需要输入框输入百分比，就是小数部分最多两位，整数部分同理最多两位同时不能小于0%，不能大于或等于100%，例如：正确：0.22、3.1、15.22、88等。错误：0、负数、3.333、非数字、特殊符号（小数点除外）、102.22等，当输入错误的字符时自动校验使得它不能输入。

---

解决方案：

简要：使用正则表达式+if/else判断

        因为对正则表达式不了解，所以先百度，但是大部分都是保留两位小数的，而且有时候校验成功但是仍能输入错误字符，找了半天找到一个比较相符的：

限制el-input只能输入两位小数_崔大宽的博客-CSDN博客_el-input限制两位小数限制el-input只能输入两位小数https://blog.csdn.net/qq_44831658/article/details/123526680        这个代码很强大，基本功能除小数点前位数限制外的功能全部实现（包括非负数，特殊字符限制等），现在只要校验前两位即可，找了半天文章，找到了相符的，校验成功但是仍可以输入，因为错误信息没有通过replace替换（个人想法，能力有限，不能更改别人的正则表达式），比如^[0-9]{0,2}(\.[0-9]{1,2})?$可以校验小数点前2位和后两位，但是不知道怎么替换，所以只能用笨办法了

        思路就是百分数大于0小于100，判断在这个范围内的就行，因为借鉴的文章把输入内容转为字符串了，所以先使用Number()判断是不是数字，数字的话即使是‘1.’也能被判断为数字，其他是NaN，是数字进行下一步判断，判断输入的值是不是大于0小于100，是的话不做处理，不然将第三位替换为空(正则校验应该是将第三位切掉换为匹配的新字符串：aa.replace(/(.{2})./g,"$1"))，这里借鉴：

https://www.5axxw.com/questions/content/1d0sm0https://www.5axxw.com/questions/content/1d0sm0

        之后处理非数字的，虽然限制了数字大小，但是现在的判断会导致之前的正则表达式的对小数点的限制放开了，只有开始输入有问题，后续校验仍然成立，例如直接输入abc等可以但是先输入数字后字母等不行；所以对非数字校验，大佬已经实现输入的第一位为小数点，则替换成 0. 实现自动补全的功能，所以现在开始输入小数点会替换为0.，那么如果输入的东西不是0.，就直接换为空，如果输入的是0.（被替换的也算，不然可以输入‘0.......’这种错误形式），那么就赋值‘0.’。

具体代码：

        vue部分

<!-- 输入框 -->
<el-input
    class="formLabelwidth"
    @input="limitInput($event, '你的参数')"
    v-model="formInline.depreciation"
>
    <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
</el-input>

        js部分

//限制只能输入两位小数

    limitInput(value, name) {
      let aa = ('' + value) // 第一步：转成字符串
        .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d{0,2}(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
        // 是个数字
        if(Number(aa)){
            // 小于100大于0正确
          if(0<Number(aa)&&Number(aa)<100){
            console.log(1,aa)
            this.form[name] = aa
          }else{
            // 大于100直接将第三个删掉替换为前两个字符组。触发字符100.25等
            console.log(2,aa)
            // this.zzbds = aa.splice(3,1)
            this.form[name] = aa.replace(/(.{2})./g,"$1")
          }
        }else{ // 不是个数，比如abd、0......等，原因是上面的判断覆盖了一部分正则校验
          if(aa != '0.'){
            // 不是0.开头的，比如字母等直接替换为空。触发字符abds等
            this.form[name] = ''
            console.log('zm',aa)
          }else{
            // 是0.开头的换为0.，触发字符0......等
            this.form[name] = aa
            console.log('sm',aa)
          }
        }
    },