为什么 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)。

因此，在这种情况下，您会遇到一个不幸的情况，即空格不在电子邮件地址的中间，而是在开头或结尾。但是，如果您查看浏览器对此输入类型遵循的验证，它仍然不会被允许。

您有两个选择：

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])?)*$" />然后修改该正则表达式以允许结尾空格（尽管您需要检查后端以确保它允许它们，否则您需要执行 a.trim()删除周围的空间。

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

(A)根据这个答案：

允许使用空格和“(),:;<>@[] 字符，但有限制（它们只允许在带引号的字符串内...