修剪输入中值的空白

Question

新手需要帮助。我很难从提交表单的输入中删除空格。这是我尝试的方法：

\n\n

var usernameInput = document.querySelector('.setup-user-name');\nvar newValue = usernameInput.value.trim();\nusernameInput.value = newValue;\n

\n\n

之后该表单应该经过如下验证：

\n\n

usernameInput.addEventListener('invalid', function () {\n  if (usernameInput.validity.tooShort) {\n    usernameInput.setCustomValidity('\xd0\x98\xd0\xbc\xd1\x8f \xd0\xb4\xd0\xbe\xd0\xbb\xd0\xb6\xd0\xbd\xd0\xbe \xd1\x81\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe\xd1\x8f\xd1\x82\xd1\x8c \xd0\xbc\xd0\xb8\xd0\xbd\xd0\xb8\xd0\xbc\xd1\x83\xd0\xbc \xd0\xb8\xd0\xb7 2-\xd1\x85 \n\xd1\x81\xd0\xb8\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2');\n  } else if (usernameInput.validity.valueMissing) {\n    usernameInput.setCustomValidity('\xd0\x9e\xd0\xb1\xd1\x8f\xd0\xb7\xd0\xb0\xd1\x82\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xbd\xd0\xbe\xd0\xb5 \xd0\xbf\xd0\xbe\xd0\xbb\xd0\xb5');\n  } else {\n    usernameInput.setCustomValidity('');\n  }\n});\n

\n\n

即使我使用该trim方法，我仍然可以提交输入中包含空格的表单。

\n

Answer 1

pattern您可以通过使用 html属性并使用正则表达式来定义可接受的用户名，以防止用户输入包含前导或尾随空格的用户名：

<p>Try entering a value with leading and/or trailing spaces</p>
<p>If the form disappears that means the value was accepted</p>
<form enctype"...">
  <input class="setup-user-name" placeholder="username" pattern="^[^ ].+[^ ]$" />
  <input type="submit" value="submit" />
</form>

您会注意到我在这里使用的正则表达式是：

^[^ ].+[^ ]$

• 最初的克拉符号 ( ^) 表示“字符串的开头”。
• 该序列的[^ ]意思是“除空格外的任何字符”
• 该序列的.+意思是“任何内容；至少 1 个字符”
• 该序列[^ ]再次表示“除空格之外的任何字符”
• 最后一个$符号的意思是“字符串的结尾”

此正则表达式将“可接受”的值定义为在字符串开头或字符串结尾之前没有空格的值。