Javascript 如何检查表单提交后已存在的电子邮件

我创建了一个订阅表单，用户在其中输入他的电子邮件并订阅。现在我想添加一个检查，如果用户的电子邮件已经注册或没有。为此，我正在考虑在电子邮件阵列上使用过滤器，或者是否有更好的方法

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: [],
      interest: "",
      success: false,
      error: false,
      errorMessage: "",
      loading: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  }

handleSubmit(e) {
    e.preventDefault();
    const { email, interest } = this.state;
    //Email already registered
    const filterEmail = email.filter(x => x === email);
    if (filterEmail) {
      this.setState({
        error: true,
        errorMessage: "Email already subscribed"
      });
    }

}

---

有人能帮我对已经存在的电子邮件进行验证吗？

您可以使用JavaScript includes方法检查数组中是否已经存在值

if(email.includes('example@react.com')){
   //Email already exists 
}

---

由于电子邮件似乎是一个唯一的键，我将使用.find（）因为.filter（）查找所有匹配项，而不仅仅是第一个匹配项。 更多信息

---

在实际应用程序中，这应该在后端通过异步操作完成，并分派错误，而前端只负责显示错误。

也许您可以尝试以下方法：

因此，我假设您有一个电子邮件的

字段

首先，将

enteredEmail

添加到您的状态

this.state = {
      email: [],
      interest: "",
      success: false,
      error: false,
      errorMessage: "",
      loading: false,
      enteredEmail: "",
    };

之后，将另一个处理程序添加到

表单

，以更新

输入的邮件

：

handleInputChange = (e) => {
    this.setState({enteredEmail: e.target.value})
};

将

handleInputChange

传递给您的输入，如下所示

onChange={props.handleInputChange}

然后，在

handleSubmit

中，您可以尝试查看

email

数组中是否存在此电子邮件

handleSubmit(e) {
    e.preventDefault();
    const { email, interest, enteredEmail } = this.state;
    //Email already registered
    const filterEmail = email.filter(x => x === enteredEmail);
    if (filterEmail) {
      this.setState({
        error: true,
        errorMessage: "Email already subscribed"
      });
    }

---

您可以尝试使用indexOf方法，因为电子邮件变量是一个数组。因此，在您的情况下，我将创建一个单独的handleChange函数，称为handleEmailChange

handleEmailChange(e) {
  const { name, value } = e.target;
  if (this.state.email.indexOf(value) !== -1) {
    this.setState({
      error: true,
      errorMessage: "Email already subscribed"
    })
  } else {
    this.setState({
      [name]: value
    });
  }
}

---

在前端检查您的电子邮件存在安全风险。首先，您必须已经从数据库中查询了所有电子邮件列表，并将它们发送到前端进行此筛选检查。您永远不想在前端公开您的用户电子邮件。相反，您希望进行api调用并在服务器中执行检查，并让服务器以抛出异常的方式响应，“电子邮件已经存在！”然后向用户显示server error.message