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

【问题标题】：Validate form inputs with conditional format checks使用条件格式检查验证表单输入
【发布时间】：2018-11-11 16:14:19
【问题描述】：

我在 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。

【问题讨论】：

标签： reactjs validation

【解决方案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;
  }

【讨论】：

【解决方案2】：

您似乎正在尝试验证firstName 和lastName，因为它们的值仅仅是真实的，然后基于它们是数字的后续字段？

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

    return result
  }

通过解构状态，您可以选择属性并单独执行验证，代码不太复杂。

如果您唯一关心的是其他字段实际上是一个数字，isNan 应该可以工作。

【讨论】：