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

Question

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

我在 Chrome 中测试了这个问题，空的 space 不会被检测到，但在 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

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

所以在这种情况下，您会遇到一个不幸的情况，其中 space 不在电子邮件地址的中间，而是在开头或结尾。但是你看validation that the browser follows for this input type，还是不行。

您有两个选择：

将其设置回 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])?)*$" />，然后修改该正则表达式以允许结尾 space s（虽然你需要检查后端以确保它允许它们，否则你需要做一个 .trim() 来删除周围的 spaces。
在用户退出输入后对你的输入做一个.trim()；删除开头或结尾的白色spaces。

(A) According to this answer:

space and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string...

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

Why HTML5 input type email doesn't allow empty space?

html

javascript

html-email