ReactJS实现表单提交前校验邮箱是否存在于外部API

要实现邮箱已存在时提示并阻止表单提交，你需要在提交前先调用API校验邮箱是否存在，再决定是否执行创建请求。同时还要修正现有代码里的几个问题（比如表单值未绑定到请求体、input类型错误等），具体实现如下：

1. 添加邮箱校验函数 #

假设你的外部API提供了邮箱校验接口（比如GET https://localhost:3000/check-email?email={email}），创建异步函数检查邮箱是否已存在：

const checkEmailExists = async (email) => {
  try {
    const res = await fetch(`https://localhost:3000/check-email?email=${encodeURIComponent(email)}`, {
      method: 'GET',
      headers: {
        'x-client-ID': 'ID', 
        'x-client-Secret': 'secret'
      }
    });
    // 根据API返回结构调整，示例为返回{ exists: boolean }
    const data = await res.json();
    return data.exists;
  } catch (err) {
    console.error('邮箱校验失败:', err);
    // 校验失败时默认不阻止提交（可根据需求调整）
    return false;
  }
};

2. 修改提交逻辑：先校验再提交 #

更新handleSubmit函数，先完成邮箱校验，只有邮箱不存在时才发送创建请求：

let handleSubmit = async (e) => {
  e.preventDefault();
  setMessage("");

  // 基础邮箱格式校验
  if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
    setMessage("请输入有效的邮箱地址");
    return;
  }

  // 检查邮箱是否已存在
  const emailExists = await checkEmailExists(email);
  if (emailExists) {
    setMessage("该邮箱已存在，请更换邮箱");
    return;
  }

  // 邮箱不存在，执行创建用户请求
  try {
    let res = await fetch("https://localhost:3000/addGuest",{
      method: "POST",
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'x-client-ID': 'ID', 
        'x-client-Secret': 'secret'
      },
      // 绑定表单输入值到请求体，替换原固定值
      body: JSON.stringify({
        "homeClubId": parseInt(homeClubId),
          "parentMemberId": null,
          "employeeConsultantId": null,
          "recommendedByMemberId": null,
          "recommendedByReferralCode": null,
          "personalData": {
            "firstName": firstName || "null",
            "lastName": lastName,
            "birthDate": null,
            "sex": "other",
            "phoneNumber": phoneNumber,
            "email": email,
            "citizenshipCountrySymbol": null,
            "personalId": null,
            "documentTypeId": null,
            "documentNumber": null
          },
          "addressData": {
            "street": street,
            "additionalAddressLine": null,
            "postalCode": postalCode,
            "cityId": null,
            "cityName": cityName,
            "stateId": stateId,
            "countrySymbol": countrySymbol || "AU"
          },
          "agreements": [
            {
              "agreementId": 3,
              "agreementAnswer": true
            },
            {
              "agreementId": 16,
              "agreementAnswer": true
            },
            {
              "agreementId": 17,
              "agreementAnswer": true
            }
          ]
      }),
    });
    let resJson = await res.json();
    if (res.ok) { // 用res.ok替代status===200，覆盖2xx状态码
      setfirstName("");
      setlastName("");
      setphoneNumber("");
      setemail("");
      setstreet("");
      setpostalCode("");
      setcityName("");
      setstateId("");
      setcountrySymbol("AU");
      sethomeClubId("1");
      setMessage("用户创建成功");
      console.log(resJson)
    } else {
      setMessage("创建失败：" + (resJson.message || "未知错误"));
    }
  } catch (err) {
    console.error('创建请求失败:', err);
    setMessage("网络错误，请稍后重试");
  }
};

3. 修正表单input细节 #

• 邮箱输入框改为type="email"，触发浏览器基础格式校验
• 修正placeholder匹配对应字段，添加required做非空校验：

return (
  <div className="App">
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={firstName}
        placeholder="名"
        onChange={(e) => setfirstName(e.target.value)}
        required
      />
      <input
        type="text"
        value={lastName}
        placeholder="姓"
        onChange={(e) => setlastName(e.target.value)}
        required
      />
      <input
        type="tel"
        value={phoneNumber}
        placeholder="手机号"
        onChange={(e) => setphoneNumber(e.target.value)}
        required
      />
      <input
        type="email"
        value={email}
        placeholder="邮箱"
        onChange={(e) => setemail(e.target.value)}
        required
      />
      <input
        type="text"
        value={street}
        placeholder="街道地址"
        onChange={(e) => setstreet(e.target.value)}
      />
      <input
        type="text"
        value={postalCode}
        placeholder="邮政编码"
        onChange={(e) => setpostalCode(e.target.value)}
      />
      <input
        type="text"
        value={cityName}
        placeholder="城市"
        onChange={(e) => setcityName(e.target.value)}
      />
      <input
        type="text"
        value={stateId}
        placeholder="州/省ID"
        onChange={(e) => setstateId(e.target.value)}
      />

      <button type="submit">创建</button>

      <div className="message">{message ? <p>{message}</p> : null}</div>
    </form>
  </div>
);

补充说明 #

• 如果API没有专门的邮箱校验接口，也可以通过创建请求返回的错误码判断（比如409冲突表示邮箱已存在），但提前校验能减少无效请求
• 使用encodeURIComponent处理邮箱参数，避免特殊字符导致请求错误

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