为什么 HTML5 输入类型的电子邮件不允许空格？

Question

我在我的应用程序中使用input type=email。在此之前在旧系统开发人员用户input type=text。最近我被要求修复我的代码中的“问题”。用户在输入字段中输入电子邮件地址时报告的问题，最后输入了空白空间。然后用户尝试Save 表单，并在电子邮件字段This field is mistyped 下显示错误消息。我想知道type=email 是否应该这样工作并防止电子邮件地址字段中出现空白？

我在 Chrome 中测试过这个问题，不会检测到空白，但在 Firefox 中会检测到并且会显示错误消息。

$("#save").on("click", function() {
  console.log(verifyFields('my-form'));
  if (verifyFields('my-form')) {
    alert('Saved!');
  }
});

function verifyFields(containerID, includeInvisible) {
  includeInvisible = includeInvisible || false;
  let isValid = true;
  const hdlMap = {
    //'valueMissing': "This field is required",
    //'patternMismatch': "This field is invalid",
    'tooLong': "This field is too long",
    'rangeOverflow': "This field is greater than allowed maximum",
    'rangeUnderflow': "This field is less than allowed minimum",
    'typeMismatch': "This field is mistyped"
  };

  const arrV = Object.keys(hdlMap);
  const invalidInputs = [];

  $("#" + containerID).find("input,textarea,select").each(function() {
    var curItem$ = $(this);
    var errMsg = [];
    var dispfld = curItem$.data("dispfld");
    var label = curItem$.data("label");

    if (includeInvisible || curItem$.is(":visible")) {
      if (curItem$[0].validity.valid) {
        curItem$.removeClass("is-invalid");
        return;
      }

      if (curItem$[0].validity['valueMissing']) {
        var reqMsg = label ? label + " field is required" : "This field is required";
        errMsg.push(reqMsg);
      }

      if (curItem$[0].validity['customError'] && dispfld) {
        errMsg.push(dispfld);
      }

      if (curItem$[0].validity['patternMismatch'] && dispfld) {
        errMsg.push(dispfld);
      }

      arrV.forEach(function(prop) {
        if (curItem$[0].validity[prop]) {
          errMsg.push(hdlMap[prop]);
        }
      });

      if (errMsg.length) {
        if (!curItem$.next().is(".invalid-feedback")) {
          curItem$.after('<div class="invalid-feedback"></div>');
        }
        curItem$.addClass("is-invalid").next().text(errMsg.join(' and '));
        invalidInputs.push(curItem$);
        isValid = false;
      } else {
        curItem$.removeClass("is-invalid");
      }
    }
  });

  if (invalidInputs.length) {
    invalidInputs[0].focus();
  }

  return isValid;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="my-form" id="my-form">
  <input type="email" name="user-email" id="user-email" required>
  <button type="button" id="save">Save</button>
</form>

Answer 1

空格不是input type="email" 的有效字符，因为我们不能有包含空格的电子邮件地址 (A)。

因此，在这种情况下，您会遇到一个不幸的情况，即空格不在电子邮件地址的中间，而是在开头或结尾。但是如果你看validation that the browser follows for this input type，它仍然是不允许的。

你有两个选择：

1. 将其设置回input type="text"，但设置适用于电子邮件的相同验证模式：<input type="text" pattern="/^[a-zA-Z0-9.!#$%&'*+\/=?^_{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$" />，然后修改该正则表达式以允许结尾空格（尽管您需要检查后端以确保它允许它们，否则你需要做一个.trim() 来删除那些周围的空间。

2. 在用户退出输入后对您的输入执行.trim()；删除开头或结尾的空格。

(A)According to this answer:

空格和 "(),:;@[] 字符有限制允许（它们只允许在带引号的字符串中...