只允许名字和姓氏中间有空格答案

【问题标题】：Only allow space in the middle of first name and surname只允许名字和姓氏中间有空格
【发布时间】：2018-05-06 08:49:09
【问题描述】：

试图为我们遇到的问题找到解决方案。

当用户在输入文本框中输入值时，我们不希望用户能够在开头或最后一个单词之后输入空格

我们可以在开始时使用以下代码执行此操作，但是我们无法弄清楚如何将其应用到结尾，同时仍然允许中间留出空格。

    $(function() {
    $('body').on('keydown', '#test', function(e) {
     console.log(this.value);
    if (e.which === 32 &&  e.target.selectionStart === 0) {
     return false;
     }  
     });
     });

允许

“鲍勃·史密斯”

不允许

“鲍勃·史密斯”

【问题讨论】：

从可用性的角度来看，在用户输入时进行验证是一个非常糟糕的主意。收到数据时去掉服务器上的空格。

标签： javascript input text

【解决方案1】：

只需使用javascript Trim方法，它会删除输入前后的空格，

所以如果你有像“鲍勃史密斯”这样的东西，

它会返回“Bob Smith”

var str = "       Bob Smith!        ";
console.log(str.trim());

// 输出“鲍勃·史密斯”

【讨论】：

【解决方案2】：

使用修剪

" a ".trim()
will be -> "a"

如果您想知道用户是否在字段的前面或末尾插入了任何空格字符，只需在修剪后比较长度

" a ".trim().length === " a ".length
false

"a".trim().length === "a".length
true

【讨论】：

【解决方案3】：

一个普通的解决方案可能是将值传递给正则表达式并在每个 keydown 事件中获取您需要的位：

https://jsfiddle.net/ibowankenobi/0tvvpezt/2/

document.getElementsByTagName("input")[0].addEventListener("keydown",function(e){
     var cT = e.currentTarget,
         temp;
     cT.value = (temp = cT.value.match(/\w+(?:\s+)?(?:\w+)?/gi), temp && temp[0] || "");
},false)

我允许名字和姓氏之间有多个空格，如果您愿意，可以更改它

【讨论】：

【解决方案4】：

如果你只是检查用户的选择不是在最后呢？

if (e.which === 32 && (e.target.selectionStart === 0 || e.target.selectionStart === this.value.length && this.value.includes(" "))) {}

这将检查选择是否在输入的末尾并且它是否已经包含一个空格（即，您希望在两个名称之间允许的空格）。

使用.trim() 方法的其他答案将在值更新后适用于"keyup" 事件，但不适用于"keydown"（如您的问题所示）。

【讨论】：

【解决方案5】：

对于这种情况，您需要正则表达式。我认为以下内容会有所帮助（您可能会找到更好的选择）。

如果您需要在输入前后去掉空格，您可以使用trim()。

function isCorrect(input) {

  const regex = /^[A-Za-z]* [A-Za-z]*$/i;

  if (input.match(regex)) {
    return true;
  } else {
    return false;
  }
}

const strs = [
  "John Doi",
  "Helen  J",
  " One more",
  "Singlename",
  "Jake Cham "
];

function test() {
  const body = document.querySelector('body');
  strs.forEach((e, i, arr)=> {
    const li = document.createElement('p');
    li.innerText = `Element #${i} - ${isCorrect(e)}`;
    body.appendChild(li);
  });
}

window.onload = () => {
  test();
  console.log('document loaded');
};

【讨论】：