47

HTML5 中的required属性非常方便：

<input type="text" required>

但它仍然只允许用户输入空白。有没有纯 HTML 的解决方案？

4

4 回答 4

98

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

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

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

<input required pattern="\S(.*\S)?" title="This field is required">
于 2013-06-26T14:56:41.470 回答
14

试试pattern属性。您需要一个指定“至少一个字符”的正则表达式。

于 2012-12-08T17:28:08.130 回答
2

你可能想要这个：

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

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

或者如果开头和结尾的空格很好，那么：

<input type="text" required pattern=".*\S.*">
于 2019-10-22T23:00:26.313 回答
0

第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)">

工作示例：

索引.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>

于 2020-07-18T03:11:46.490 回答