HTML输入元素只有字母、数字和只有一个空格答案

【问题标题】：HTML input element only letters, numbers and only one spaceHTML输入元素只有字母、数字和只有一个空格
【发布时间】：2019-04-20 21:32:55
【问题描述】：

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

这是我的代码：

$(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">

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

【问题讨论】：

对^[A-Za-z0-9]+(?: [A-Za-z0-9]+)*$的测试还不够吗？
您仅针对正在输入的字符测试您的正则表达式。不是整个字符串。
您的问题是关于验证，但代码是关于transform。你到底想要什么？

标签： javascript html regex input

【解决方案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">

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

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

【讨论】：