HTML输入元素只有字母，数字和一个空格

Question

我正在尝试在用户书写时执行验证，以便输入仅接受大写和小写字母，数字以及单词之间的单个空格。输入的文本也不应以空格开头或结尾。

这是我的代码：

$(function() {
  $('#input-tags').on('keypress', function(e) {
    // Get tag value from input
    let tag = $(this).val();

    // Pattern for ignore special characters
    let actualChar = String.fromCharCode(e.keyCode);
    let dontHaveSpecial = /^[A-Za-z0-9]*[ ]?[A-Za-z0-9]*$/.test(actualChar); //return true if not exists special chars, else false
    if (e.keyCode === 13) {
      dontHaveSpecial = true;
    } // 13 is enter
    if (e.keyCode === 9) {
      dontHaveSpecial = true;
    } // 9 is tab
    if (e.keyCode === 32) {
      dontHaveSpecial = true;
    } // 32 is space
    if (tag.startsWith(' ') || tag.endsWith(' ')) {
      tag = tag.trim();
    } //Tag starts or ends with space

    //Check spaces count
    let spacesCount = [...tag].filter(s => s === ' ').length;
    if (spacesCount > 1) {

      //Remove extra spaces
      let spaceIndex = tag.indexOf(' ');
      let newTag = tag.substring(spaceIndex + 1).trim();
      $(this).val(newTag);
    }

    // Prevent input if have special
    return dontHaveSpecial;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input-tags">

但是它不能正常工作，因为它允许多个空格，并且当我要删除的多余空格时，还会消除字母和数字。

Answer 1

在应用actualChar中的更改之后，需要针对该值测试正则表达式。

$(function() {
  $('#input-tags').on('keypress', function(e) {
    // we can skip the regex test for these cases
    if (e.keyCode === 13) {
      return true;
    } // 13 is enter
    if (e.keyCode === 9) {
      return true;
    } // 9 is tab

    let actualChar = String.fromCharCode(e.keyCode);

    // Get tag value from input
    let tag = $(this).val();

    // the result after the key is pressed
    let result = tag.substr(0, e.target.selectionStart) + actualChar + tag.substr(e.target.selectionEnd);

    // Pattern for ignore special characters
    return /^[A-Za-z0-9]+[ ]?[A-Za-z0-9]*$/.test(result); //return true if not exists special chars, else false

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input-tags">

1. 放入总是返回true的特殊情况。
2. 获取输入actualChar和输入tag的当前值。
3. 通过替换选择来创建结果（请参见示例图像 下面）。
4. 检查结果是否与模式匹配。如果不是，则返回false和 忽略输入。

请注意，由于可以在单词之间放置一个空格，因此您可能会得到以1结尾的值。
为了解决这个问题，您需要在使用值之前先trim。