javascript - 如何在选择时检查有效的正则表达式

Question

我有以下 code

    const SelectSizesDemo = () => {
      const pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
      const errorMsg = "please provide valid email!";

      const [emailArr, setEmailArr] = useState([]);
      const [error, setError] = useState(false);

      return (
        <div>
          <Select
            style={{ width: "90%" }}
            mode="tags"
            onChange={(e) => setEmailArr(e)}
          ></Select>
          {error && errorMsg}
        </div>
      );
    };

我正在尝试执行以下操作。用户应该输入一些电子邮件，如果它的电子邮件对我的 pattern 有效，那么我应该将它添加到我的 emailArr，如果它不正确，那么我应该显示错误消息 errorMsg，从选中项中清除，不允许用户添加到数组中。

在这段代码中，我可以成功地将任何字符串添加到我的数组中，因此我希望您能帮助我了解如何使用我的 pattern 检查该字符串。

请帮我解决这个问题。

谢谢

Answer 1

我工作过 your updated code我已经解决了它并找出了问题所在。

Here is my full code在我开始向你解释我改变了什么之前。

说明:

• 首先，为了使 select 始终具有emailArr，你需要将它绑定(bind)到那个状态值 属性。 这样，emailArr 状态的任何更改也将应用于 select 值。

  所以只需在 select 中添加:value = {emailArr}。

• 其次，在 onChange 事件中，您会在 e 中获得一个 array对象，它是选择中的当前值的数组 field 。因此，为了测试该值，您需要检查验证插入到该数组的 current 值，即最后一个。

  在您的代码中，您检查导致整个数组的验证它无法正常工作:

  您的代码:

    onChange={(e) => {
        if (pattern.test(e)) {
          setEmailArr(e);
        } else {
          setError(true);
        }
      }}
  

  应该是:

   onChange={(e) => {
        if (e.length !== 0) {//First check if the array is not empty 
  
          const value = e[e.length - 1]; //get the last(current) value from the array
          if (pattern.test(value)) {
            setEmailArr(e);
            setError(false);
          } else {
            setError(true);
          }
  
        }
      }}
  

  所以这里，我先检查一下e数组是否不为空。因为如果我检查 一个空数组 的最后一个值，它将是 undefined - 这是false，这将转到 else block 并将错误设置为是的，这是错误的。所以这就是为什么我只在以下情况下开始这些检查数组中有东西要检查。

  接下来，我检查当前值，如果有效则更新状态(需要与 select 组合) 到具有新值的新数组，否则 - 它不会。顺便说一句，我添加了 setError(false) 在如果之前尝试无效，我想隐藏以前的错误现在。

注意:您输入到 select 的电子邮件必须大写，以便与您选择的模式匹配。如果您不想要它，只需将其更改为以下模式:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\。 [a-zA-Z]{2,4}$/g.

结果:

就是这样。我希望一切都清楚，请检查the full code .