Question

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

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

该表格之后应通过以下验证：

usernameInput.addEventListener('invalid', function () {
  if (usernameInput.validity.tooShort) {
    usernameInput.setCustomValidity('Имя должно состоять минимум из 2-х 
символов');
  } else if (usernameInput.validity.valueMissing) {
    usernameInput.setCustomValidity('Обязательное поле');
  } else {
    usernameInput.setCustomValidity('');
  }
});

即使我使用trim方法，我仍然能够提交带有空格的表单。

Answer 1

Javascript修剪方法只能从字符串的两边删除空格。

var str = "  this is sample string  "
console.log(str.trim()) // "this is sample string"

如果要删除所有空格，可以使用替换方法

var str = "  this is sample string  "
console.log(str.replace(/\s/g, "")) // "thisissamplestring"

如果您正在考虑验证，则应该使用自己的验证或使用其他库进行验证，这些方法仅返回指定值的新字符串，并且不执行任何验证

Answer 2

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

<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个字符”
序列[^ ]再次表示“除空格以外的任何字符”
最后一个$符号表示“字符串的结尾”

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

修剪输入中值的空白

2 个答案: