javascript - 正则表达式验证在函数调用时未返回正确结果

Question

我有一个组件使用正则表达式来检查电子邮件格式的有效性。我将此附加为输入的 onBlur 函数，该输入也会在页面加载后作为 React Hook useEffect 的一部分在加载时运行。该功能应该检查是否有空白字段并发出错误消息，提示用户输入电子邮件地址或选择退出。如果输入的电子邮件格式错误，则会触发一个单独的错误。在加载时，一切都按预期运行，并为空输入触发初始错误。该问题发生在用户输入输入字段并离开后。即使输入字段为空，该函数也会触发并设置提示用户输入有效电子邮件的错误。我已经交换了一些东西，最初试图通过将第一个检查设置为 if(value === undefined || '' 来解决这个问题，但到目前为止我得到了相同的行为。任何建议？

验证函数

function validateEmail(value) {
  const errors = { hasError: false }
  if (value === undefined || '') {
    errors.email = 'Enter a valid email address or select Email Opt Out'
    errors.hasError = true
    return errors
  }

  if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = 'Enter a valid email address'
    errors.hasError = true
    return errors
  }
  return errors
}

Answer 1

您能否在调用验证方法之前检查您的字符串是否为空？

  function onBlur(e) {
    var stringValue = e.target.value || '';

    if(stringValue !== '') checkIfCustomerEmailIsValid(e.target.value)
  }