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

Question

我在我的应用程序中使用input type=email。在此之前，在旧系统中，开发人员使用input type=text。最近我被要求修复代码中的“问题”。用户报告了该问题，当在输入字段中输入电子邮件地址时，不小心在末尾输入了空格。然后用户尝试保存表单，并且在电子邮件字段此字段输入错误下显示错误消息。我想知道这是否是 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 and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string...