用于防止 HTML 输入中的前导空格的正则表达式模式答案

【问题标题】：Regex pattern for preventing leading whitespace in HTML input用于防止 HTML 输入中的前导空格的正则表达式模式
【发布时间】：2018-06-14 05:09:09
【问题描述】：

&lt;input type="text" pattern="^[a-zA-Z1-9].*"&gt;

如何限制以下输入元素使用前导空格，即，它应始终以除空格以外的字符开头。

This answer 建议我使用pattern="^[a-zA-Z1-9].*"，但它似乎不起作用。

编辑：

只有当我将它包装在一个表单标签和一个提交按钮中时它才有效。单击按钮会触发错误。但我希望能够限制用户在输入框本身上输入空格。

【问题讨论】：

你需要为此实现一个简单的客户端 sie 逻辑，所以 JavaScript。
除了客户端逻辑我还需要模式吗？
取决于你如何实现你的逻辑......
这对您有帮助吗？

标签： html regex

【解决方案1】：

要在没有表单标签的情况下实现这一点，我们可以使用 JavaScript 实时输入过滤器，如下所示：

var noLeadingSpace = /^\w.*$/;

$("input")
  .data("oldValue", "")
  .bind("input propertychange", function() {
    var $this = $(this);
    var newValue = $this.val();

    if (!noLeadingSpace.test(newValue))
        return $this.val($this.data("oldValue"));

    return $this.data("oldValue", newValue);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

【讨论】：

【解决方案2】：

它确实有效，但如果您尝试发送表单，它将被验证。

function myValidator(v){
  var input = document.getElementById('uglyWay')
  
  if(input){
    input.value = input.value.replace(/ /g, '')
  }
}

<form>
<input id="uglyWay" oninput='myValidator()' type="text" pattern="^[a-zA-Z1-9].*">
<button type="submit">Send</button>
</form>

【讨论】：

请查看已编辑的原始帖子。我希望能够限制用户在输入框本身上输入空格。

【解决方案3】：

问题中提到的以下正则表达式可以在不包含在表单标签内的情况下工作

input[type="text"]:valid{
background:green;
}
input[type="text"]:invalid{
background:red;
}

&lt;input type="text" pattern="^[a-zA-Z1-9].*"&gt;

【讨论】：