Question

HTML5中的required属性非常方便：

<input type="text" required>

但它仍然允许用户只输入空白区域。这是否只有HTML解决方案？

Answer 1

将pattern属性与required属性结合使用。并且一定要包含title属性，因为大多数浏览器都会将标题文本插入到验证弹出框中。

<input required pattern=".*\S+.*" title="This field is required">

.*\S+.*模式至少需要一个非空格字符，但也允许在开头或结尾处使用whitepsace字符（空格，制表符，回车符等）。如果您不希望用户能够在开头/结尾放置空格，那么请改用：

<input required pattern="\S+" title="This field is required">

Answer 2

试试pattern attribute。您需要a regex which specifies 'at least one character'。

Answer 3

您可能想要这样：

<input type="text" required pattern="\S(.*\S)?">

（输入中至少有一个非空白字符，并且在输入的开头或结尾没有空白）

或者如果开头和结尾处的空格都很好，则可以这样：

<input type="text" required pattern=".*\S.*">

Answer 4

步骤1

创建Javascript函数：

function ignoreSpaces(event) {
  var character = event ? event.which : window.event.keyCode;
    if (character == 32) return false;
}

步骤2

在HTML的任何文本输入字段中使用它。

<input type="text" id="userInput" onkeypress="return ignoreSpaces(event)">

工作示例：

index.html

<html> 
<body>
  <input type="text" onkeypress="return ignoreSpaces(event)">
  
  <script>
    function ignoreSpaces(event) {
        var character = event ? event.which : window.event.keyCode;
        if (character == 32) return false;
    }
  </script>

</body>
</html>

是否可以配置必填字段以忽略空格？

4 个答案:

步骤1

步骤2

工作示例：