在 Reactjs 中为电子邮件编写验证

Question

我确实有一个 TextField 组件可以将电子邮件作为输入。

<div className="form-group" style={styles.popupContainer}>
  <label>
    <IntlMessages id="DIC_SETTINGS_CLIENT_PIC_EMAIL" />
  </label>
  <label className="text-danger" style={styles.star_style}>
    <sup>{"*"}</sup>
  </label>
  <TextField
    error={errorInputs.email}
    margin="normal"
    fullWidth
    id={"email"}
    value={item.email}
    onChange={this.handleEmailChange("email")}
    onBlur={() => this.handleBlur("email")}
  />
</div>;

onChange()

handleEmailChange = email => event => {
        let changedEmailValue = event.target.value;

        switch (email) {
            case "email":
                let temp = this.state.item;
                temp.email = changedEmailValue;
                this.setState({
                    item: temp
                });
                break;
        }
    };

如何在这种情况下编写验证电子邮件的代码

Answer 1

您可以通过使用Regex 表达式测试event.target.value 轻松验证您的电子邮件。这是您的代码的示例实现。

这是一个实时沙盒。通过单击控制台选项卡并在输入字段中输入有效的电子邮件进行测试。

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);
  if (isValidEmail) {
    this.setState({
      item: event.target.value,
    });
  } else {
    console.log("It's not a valid email");
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;

更新：使用Switch实现

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);

  switch (event.target.id) {
    case "email":
     isValidEmail
          ? this.setState({ item: event.target.value })
          : this.setState({ item: "" });
      break;
    default:
      break;
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;