Проверка ввода формы с проверкой условного формата

Question

У меня есть функция в React, которую я использую для проверки состояния проверки формы при отправке.

Форма содержит 2 типа ввода.

Text и Number

Однако для того, чтобы у меня был некоторый контроль над длиной чисел в поле, входная пропелла number установлена ​​как text с примененной опорой maxLength.

Теперь мне нужно проверить, что при отправке формы значения в этих входных данных действительно являются числами.

Мое состояние:

 state = {
    firstName: '',
    lastName: '',
    accountNumber: '',
    sortCode1: '',
    sortCode2: '',
    sortCode3: ''
  }

Я пытаюсь проверить это, используя следующее ....

  checkValid = state => {
    const rgx = new RegExp(/^[0-9]{0,9}$/)
    const result = Object.keys(state).every(key => {
      if (key.match(/(firstName|lastName|)/)) {
        return !!state[key]
      }

      return rgx.test(state[key])
    })

    return result
  }

То, что я пытаюсь добиться, это проверить, если на firstName и lastName убедиться, что есть значения, а затем проверить все остальные реквизиты, чтобы убедиться, что они только числа и цифры.

Кажется, я не могу заставить это работать, поскольку форма либо всегда возвращает true, либо всегда возвращает false, в зависимости от того, как я изменяю код.

Как только любое поле будет недействительным, я просто хочу вернуть false.

Answer 1

Получено несколько небольших ошибок с регулярным выражением. Ниже код должен работать. =) Это будет возвращать false, как только одно поле будет пустым или значение не будет числом в полях, где вы хотите число.

checkValid = state => {
    const rgx = new RegExp(/^[0-9]*$/)
    const result = Object.keys(state).every(key => {

    // If field is empty return false
    if (state[key] === '') return false;


    // If on firstName or lastName return true as we already know that the field isn’t empty
    if (key.match(/^(firstName|lastName)$/)) return true;


    // If not firstName or lastName test the field with rgx
    return rgx.test(state[key])
    })
    return result;
  }

Answer 2

Похоже, вы пытаетесь проверить firstName и lastName, основываясь на том, что их значения просто соответствуют действительности, а затем последующие поля, основанные на них, являются числом?

  checkValid = ({ firstName, lastName, ...rest }) => { 
    const result = !!firstName && !!lastName && Object.keys(rest).every(key => !isNaN(rest[key]))

    return result
  }

Деконструируя состояние, вы можете выбрать свойства и выполнить проверку отдельно, с менее сложным кодом.

Если вас беспокоит только то, что другие поля на самом деле являются числами, isNan должно работать.