Правильная проверка ввода с помощью регулярного выражения

Question

Я хочу, чтобы пользователи вводили только целые или плавающие числа. Прямо сейчас я могу вводить только целые числа, это позволяет вводить точку или запятую. Не могу найти правильное регулярное выражение для проверки как целых, так и плавающих чисел.

<input
  type="text"
  id="depositedAmount"
  maxLength={9}
  placeholder="Enter amount"
  onChange={(e) => this.handleInputChange(e, currentComProfile)}
  value={depositedAmount}
/>

handleInputChange=(e, currentComProfile) => {
    const re = /^[+-]?\d+(\.\d+)?$/;

    if (e.target.value === '' || re.test(e.target.value)) {
      if (e.target.id === 'depositedAmount') {
        this.props.updateDepositedAmount(e.target.value, currentComProfile);
      }
      if (e.target.id === 'willBeCreditedAmount') {
        this.props.updateWillBeCreditedAmount(e.target.value, currentComProfile);
      }
    }
  }

Answer 1

Вы можете использовать

const rx_live = /^[+-]?\d*(?:[.,]\d*)?$/;

для проверки в реальном времени. Для окончательной проверки используйте

const rx_final = /^[+-]?\d+(?:[.,]\d+)?$/;

Или, что лучше, просто используйте регулярное выражение в атрибуте pattern: pattern="[+-]?\d*(?:[.,]\d*)?".

NOTE

• ^ - начало строки
• [+-]? - необязательно + или -
• \d* - 0 или более цифр
• (?:[.,]\d*)? - необязательная последовательность . или ,, а затем 0 или более цифр
• $ - конец строки.

В окончательной проверке,\d+ используется вместо \d* для сопоставления одной или нескольких цифр, а не нуля или более цифр.

См. Демонстрационную версию JS:

const rx_live = /^[+-]?\d*(?:[.,]\d*)?$/;

class TestForm extends React.Component {
  constructor() {
    super();
    this.state = {
      depositedAmount: ''
    };
  }

  handleDepositeAmountChange = (evt) => {
    if (rx_live.test(evt.target.value))
        this.setState({ depositedAmount : evt.target.value });
 }
  
  render() {
    return (
      <form>
       <input
        type="text"
        id="depositedAmount"
        maxLength={9}
        pattern="[+-]?\d+(?:[.,]\d+)?"
        placeholder="Enter amount"
        onChange={this.handleDepositeAmountChange}
        value={this.state.depositedAmount}
       />
      </form>
    )
  }
}


ReactDOM.render( < TestForm /> , document.getElementById('app'));

<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="app"></div>

Answer 2

Ваше регулярное выражение должно соответствовать точкам, но не похоже на запятые. Вы можете попробовать что-то вроде:

^[0-9]+([,.][0-9]+)?$

Для справки:

[0-9] соответствует цифрам 0-9.

+ соответствует от одного до неограниченного количества раз, столько раз, сколько возможно.

[,.] соответствует запятой или точке.

Возможно, существует способ упростить это регулярное выражение, но ядумаю, что это должно работать.

Вы можете проверить это здесь: https://regex101.com/r/V0J63U/1

- Обновление -

Для соответствия с ведущими знаками (т.е. , +/-), вы можете добавить ^[+-]? в начало шаблона:

^[+-]?[0-9]+([,.][0-9]+)?$

Вы можете проверить это здесь: https://regex101.com/r/cQylX3/1

Спасибовам @CodeManiac за советы!