Question

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

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

}

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

Answer 1

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

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

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

Answer 2

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

在真实世界的应用程序中，这应该在后端执行异步操作并调度错误，前端只关注显示错误。

Answer 3

也许你可以尝试这样的事情：

所以我假设你有一个<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"
      });
    }

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

Answer 5

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

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

5 个答案: