Question

我有一个名为 formValues 的数组，其中包含代表每个输入字段的对象。当用户在字段中键入时，对象将添加到数组中。因此，如果没有人输入，则该数组将为空。我想要一种方法来检查是否所有将始终为4的字段都有效并且具有不为空的值。

这里是构成每个字段的对象。

[{{name:firstname, value:'fdfs', valid: true }}, next object... ]

我需要一种方法来检查所有字段是否有效，并且值中是否包含某些内容。

我在想类似下面的伪代码之类的方法可能有效，但不确定是否有更有效的方法或如何完全编写它。

创建每个输入字段名称的数组。然后在它们上映射并尝试将名称与对象名称匹配，以查看其是否有效。我所拥有的已经很近了，但是我对此有些犹豫。请记住，直到每个类型都变成类型时，并不是所有的对象都将位于formValues数组中，因此我需要检查一下。

const allValid = names.map((name) => {
  return formValues that matches name must be valid and have a value length 
});

该函数将在我的React组件每次更新时运行。

Answer 1

让我们将其分为几部分：

“与名称匹配的formValues”

就是这样：

const item = formValues.find(item => item.name === name);
// check that item is not undefined.

“必须是有效的并且具有值的长度”
```
item && item.valid && item.value.length > 0
```

因此您可以执行以下操作：

const allValid = names.every(name => {
  const item = formValues.find(item => item.name === name);
  return item && item.valid && item.value.length > 0;
});

Answer 2

出于效率目的，我将表单值缩小为formValueName => formValue的映射。

将formValues缩小到地图
将每个名称映射到相应的表单值（默认为空对象）
使用every

代码：

const formValuesMap = formValues.reduce((init, curr) => 
    Object.assign(init, {[curr.name]: curr}), {});

const isAllValid = names
    .map(name => formValuesMap[name] || {})
    .every(({ valid, value }) => valid && value && value.length > 0);

使用js检查所有输入字段是否有效

2 个答案: