React Js中数字验证的逻辑错误以及百分比符号

Question

在我的项目中，我有一个名为 Rate 的字段，它可以接受这些值： 例如：

• 2.32
• 2.32%

条件：

• 只允许数字。
• 小数点后只有两位数。
• 不允许使用字母和其他符号。

这是我正在使用的一段代码

handleCheck = (e)=> {
    let onlyNums = e.target.value.replace(/[^0-9\.,%]/g, ''); 
    var str = '';
    var isperc = false;    
    if(onlyNums.indexOf('.') !== -1)
    {     
      var arr = onlyNums.split(".");
      if(arr[1].length >2)
      {
        if( arr[1].indexOf('%') !== -1)
          isperc = true;
        arr[1] = arr[1].slice(0, 2);
      }
      if(isperc)
        e.target.value = arr[0] + '.' + arr[1] + '%';
      else
        e.target.value = arr[0] + '.' + arr[1];
    }
    if(onlyNums.indexOf('%') !== -1)
    {
      str = onlyNums.indexOf('%');
      var start = (str + 1);     
      onlyNums = e.target.value.slice(0, start);
      e.target.value=onlyNums;
    }

  }

上图显示了问题。 Rate 字段在输入小数点之前也接受字母。

我应该如何修改我的代码以避免这个问题？要么 我如何转换 \d+(\.\d\d)?%? 正则表达式，类似于我在问题中的 replace 函数中使用的那个，因为这个正则表达式不适用于我的代码

Answer 1

我对 regex 做了一些更改，并在顶部添加了 parseFloat()。在第一次替换调用之后也调用以更改输入的值。这可能是你一开始就错过的东西。

class Input extends React.Component {
  
  handleCheck = (e)=> {
    let onlyNums = e.target.value.replace(/[^.%\d]?(\.\%)/g, ''); 
    e.target.value = isNaN(parseFloat(onlyNums))?'':parseFloat(onlyNums);

    var str = '';
    var isperc = false;    
    if(onlyNums.indexOf('.') !== -1)
    {     
      var arr = onlyNums.split(".");
      if(arr[1].length >2)
      {
        if( arr[1].indexOf('%') !== -1)
          isperc = true;
        arr[1] = arr[1].slice(0, 2);
      }
      if(isperc)
        e.target.value = arr[0] + '.' + arr[1] + '%';
      else
        e.target.value = arr[0] + '.' + arr[1];
    }
    if(onlyNums.indexOf('%') !== -1)
    {
      str = onlyNums.indexOf('%');
      var start = (str + 1);     
      onlyNums = e.target.value.slice(0, start);
      e.target.value=onlyNums;
    }

  }

  render() {
    return (
      <input onChange={this.handleCheck} />
    );
  }
}

ReactDOM.render(
  <Input />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">

</div>

编辑（更多正则表达式方法）：

class Input extends React.Component {
    constructor(props) {
        super(props);
        this.input_prev_value = ''; //property for storing previous input value
    }

    handleCheck = (e)=> {
        let input_value = e.target.value.replace(/(\.\%)/,'');  //takes care of '.%' case

        if((input_value.search(/^[0]{1,}[\d]/)!==-1 || // takes care of leading zeroes
            input_value.search(/^(\d+)([\.])?([\d]{1,2})?([\%])?$/)===-1) &&  //main pattern
            input_value!=='')
            e.target.value  = this.input_prev_value;
        else {
            e.target.value = input_value;
            this.input_prev_value = e.target.value;
        }

    }

    render() {
        return (
            <input onChange={this.handleCheck} />
        );
    }
}

ReactDOM.render(
    <Input />,
        document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>