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

您似乎正在尝试根据firstName和lastName的值简单地确定其为真，然后基于它们的后续字段为数字来验证？

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

    return result
  }

通过解构状态，您可以选择属性并使用较少复杂的代码分别执行验证。

如果您唯一关心的是其他字段实际上是数字，则isNan应该有效。

Answer 2

使用正则表达式有一些小错误。下面的代码应该工作。 =）一旦一个字段为空或您要输入数字的字段中的值不是数字，则此字段将返回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;
  }

使用条件格式检查来验证表单输入

2 个答案: