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

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，你需要绑定它与那个状态value属性。这样，emailArr 状态的任何更改也将应用于select 值。

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

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

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

  你的代码：

    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 块并将错误设置为 是的，这是错误的。所以这就是为什么我只在以下情况下开始这些检查 数组中有一些东西要检查。

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

和一张纸条：您输入到选择的电子邮件必须是大写为了匹配您选择的模式。如果您不想要它，只需将其更改为以下模式：/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/g。

结果：

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

Answer 2

您可以使用以下代码使用正则表达式验证字符串：

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

Answer 3

这个解决方案的目标是告诉 antd 使用“我们的”电子邮件列表，而不是使用“他们的”内部列表。

onChange 在将新元素添加到列表时调用。检查最后一个元素，看看它是否有效，然后用 antd 的电子邮件列表更新您的内部电子邮件列表。

我使用自动处理重复项的Set，但如果您愿意，您可以只使用列表来执行此操作。

每当 emailSet 更改时，我都会按字母顺序更新电子邮件列表，但如果您不想这样做，则不需要这样做。一个简单的[...emailSet] 就足够了。

onDeselect 似乎是在删除最后一个元素时调用的，所以我只是清除了其余元素。

const SelectSizesDemo = () => {
  const pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);

  const [error, setError] = useState(false);
  const [emailSet, setEmailSet] = useState(new Set());
  const emails = useMemo(() => {
    return [...emailSet].sort((a, b) => a.localeCompare(b));
  }, [emailSet]);

  const addEmail = (e) => {
    if(e.length === 0) {
      return;
    }
    const email = e[e.length - 1];
    if (!pattern.test(email)) {
      setError(errorMsg);
      return;
    }
    setEmailSet(new Set(e))
    if (error) {
      setError(false);
    }
  };

  const clearAll = () => {
    setEmailSet(new Set([]));
  };

  return (
    <div>
      <Select
        style={{ width: "90%" }}
        mode="tags"
        onChange={addEmail}
        onDeselect={clearAll}
        value={emails}
      ></Select>
      {error && errorMsg}
    </div>
  );
};

完整解决方案here。

Answer 4

根据我的理解，您想根据用户输入的输入值测试电子邮件，如果它是有效的电子邮件，则根据您想要将其存储在数组中的模式，否则您想要显示错误消息。如果是，给你：

要验证电子邮件，您可以使用 RegEx test() 方法执行正则表达式和指定字符串之间的匹配搜索。如果电子邮件有效，则返回 true，否则返回 false。

现场演示：

const {useState, useCallback} = React;

function Example() {
    const [emailArr, setEmailArr] = useState([]);
    const [error, setError] = useState(false);
    
    function isValidEmail(email) {
      const pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
      return pattern.test(email);
    }
    
    const handleEmailValidation = event => {
      const errorMsg = "please provide valid email!";

      if (!isValidEmail(event.target.value)) {
        setError(errorMsg);
      } else {
        setEmailArr(oldArray => [...oldArray, event.target.value]);
        setError(null);
      }
    };
    
    return (
        <div>
          <input
            id="email"
            name="email"
            onChange={handleEmailValidation}
          />
          {error && <span class="error">{error}</span>}
          
          <div>{emailArr.map(entry =>
            <div>{entry}</div>
          )}
          </div>
        </div>
    );
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Answer 5

正如 Moein 所回答的，pattern.test(string) 是检查用户输入字符串是否与您的正则表达式模式匹配的有效方法。

或者，您可以使用 String.match(regex) 来获取匹配数组或 null。这仍然可以用来评估真实性。

这里讨论了比较：regex.test V.S. string.match to know if a string matches a regular expression

Answer 6

你只需要使用正则表达式方法作为 pattern.test(yourString)