正则表达式验证在函数调用时未返回正确的结果答案

【问题标题】：Regex validation not returning proper results upon function call正则表达式验证在函数调用时未返回正确的结果
【发布时间】：2019-11-02 10:35:30
【问题描述】：

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

Functions for validation

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
}

【问题讨论】：

标签： javascript regex reactjs

【解决方案1】：

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

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

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

【讨论】：

不幸的是，它仍然只检查一个空格，我需要能够验证输入中的任意数量的空格

【解决方案2】：

我能够运行一个条件正则表达式来检查该值是否有空格或根本没有值，这就成功了！下面的代码供任何人将来参考

Solution

function validateEmail(value) {
  const errors = { hasError: false }
  if (/\s/g.test(value) || !value) {
    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
}

Original

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
}

【讨论】：