无法检测到输入的前导空格和尾随空格

问题描述

在Chrome 86中，无论出于何种原因，JS似乎都无法检测到来自input[type=email]事件中的input元素的用户输入中的前导空格和尾随空格。我已经测试了检测此类空间的多种方法（例如Str.includes(' ')，/\s/.test(str)等），但它们都不起作用。

有人知道解决方法吗？

解决方法

(32,32,1)类型的输入与email类型的输入不同。有一些输入自动验证可以确保该值的格式正确。

在提交表单之前，将自动验证输入值，以确保其为空或格式正确的电子邮件地址（或地址列表）。

来自MDN

我假设这就是为什么空格从您正在测试的值中“删除”的原因。有3种可能的值格式：

• 空字符串
• 一个格式正确的电子邮件地址
• 用逗号分隔的电子邮件地址列表。

伪类text和:valid自动应用于输入，您可以将它们用于样式和逻辑。

:invalid

document.querySelectorAll("input[type='email']:valid").forEach(field=>{
  console.log(field.value + " is valid" )
})

document.querySelectorAll("input[type='email']:invalid").forEach(field=>{
  console.log(field.value + " is invalid" )
})

input:valid{
  background: green
}

input:invalid{
  background: red
}

请注意，将空字段视为有效，以及不带TLD的电子邮件地址...