javascript - Jquery 允许字母数字验证中存在空格

Question

我正在尝试使用 jquery 对文本框值进行验证，以确保文本框仅接受字母数字值。我还尝试在单词之间留出空格。我不想在文本框中的句子左右留有空格。如何在文本框中的单词中间允许空格？

My trails fiddle

$('#dsTest').keyup(function() {
  if (this.value.match(/[^a-zA-Z0-9]/g)) {
    this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
  } 
});

Answer 1

仅使用 keyup 无法优雅地完成此操作，因为在输入句子的过程中，您刚刚输入的空格(原本应该位于中间) )在最后。

相反，我会做这样的事情:

$('#dsTest').keyup(function() {
  if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
    this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
  } 
});

$('#dsTest').focusout(function() {
  this.value = this.value.trim();
});

允许在键入过程中键入空格，并在稍后的某个合理时间点使用 String.trim() 去除前导和尾随空格。在我的示例中，我使用 .focusout()，但您也可以在使用该值时进行 trim 。

这是一个更广泛类别的验证问题的示例，其中在输入输入时进行测试会阻止用户输入完成后合法的值 - 因为每次输入一个字符的值需要值暂时处于无效状态。处理该问题有两种主要方法:

• 在用户完成输入值之前不要测试验证
• 标记无效值而不是更改它们

您还可以将两者结合起来 - 例如，在用户键入时突出显示该字段以显示当前值无效，然后修复该值，使其在无效值出现时离开该字段时有效。仍然存在。