表单提交后如何检查电子邮件是否已存在答案

【问题标题】：How to check email already exists after form submission表单提交后如何检查电子邮件是否已存在
【发布时间】：2018-10-13 22:06:02
【问题描述】：

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

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 reactjs

【解决方案1】：

也许你可以试试这样的：

所以我假设您的电子邮件有一个 <input> 字段。

首先，将enteredEmail 添加到您的状态。

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

之后，向Form 添加另一个处理程序以更新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"
      });
    }

【讨论】：

【解决方案2】：

您可以使用 JavaScript 包含方法来检查一个值是否已存在于数组中。

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

【讨论】：

【解决方案3】：

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

在现实世界的应用程序中，这应该在后端使用异步操作和分派错误来完成，而前端只负责显示错误。

【讨论】：

【解决方案4】：

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

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
    });
  }
}

【讨论】：

【解决方案5】：

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

【讨论】：