React应用中如何用.includes()实现邮箱输入的双条件验证？

你现在的问题出在some()方法的逻辑上——它只要数组里有一个元素满足条件就返回true，自然没法实现**同时包含@和.**的要求。

要实现双条件同时满足的验证，有两种简单的修改方式：

方式一：使用every()方法 #

every()会检查数组中所有元素是否都满足条件，正好匹配你的需求：

const emailValidation = ["@", "."];
<input
    type="text"
    placeholder="Email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    onBlur={(e) => {
        setIsEmailValid(
            // every()要求数组中每个元素都满足includes条件
            emailValidation.every((el) => e.target.value.includes(el))
        );
    }}
/>

方式二：直接显式判断两个条件 #

如果觉得数组方法不够直观，也可以直接分别判断是否包含@和.，可读性更强：

<input
    type="text"
    placeholder="Email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    onBlur={(e) => {
        const inputValue = e.target.value;
        setIsEmailValid(inputValue.includes("@") && inputValue.includes("."));
    }}
/>

两种方式都能实现**必须同时包含@和.**的验证逻辑，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者Mohit