为什么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：

space和“（），：; <> @ []字符允许有限制（如下文所述，只能在带引号的字符串中使用，此外，反斜杠或双引号-引号前必须加反斜杠）;