Question

我要实现这样的文字输入：

<input type="text"  maxlength="16" required/>

想要使用这样的有效和无效的电台：

input:invalid {
    background: #fdd; 
}
input:valid {
    background: #dfd; 
}

但是当我写任何文本时，我的输入始终有效。我尝试使用pattern：

pattern=".{16,}"

但这并没有解决任何问题。我的错误在哪里？

当输入长度等于16时，输入必须有效。

Answer 1

你很亲密！这是如何做到的。

仅允许使用字母数字

<form>
  <input id="username" type="text" pattern="[a-zA-Z0-9]{16}" required>
  <input id="submit" type="submit" value="create">
</form>

允许任何字符

<form>
  <input id="username" type="text" pattern=".{16}" maxlength="16" required>
  <input id="submit" type="submit" value="create">
</form>

使用jQuery mask（）插件

在这里，我们只强制分隔符成为输入值的一部分，后跟每个组中的字符数。在这种情况下，4个数字后跟一个空格。

$(document).ready(function() {
  $('#username').mask('9999 9999 9999 9999');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>

<form>
  <input id="username" type="text" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" required>
  <input id="submit" type="submit" value="create">
</form>

有关正则表达式和模式的详细信息，请查看Regexr。

Answer 2

在您的代码中，属性maxlength =＆＃34; 16＆＃34;不允许在输入框中键入超过16个字符。当输入介于 0到16个字符之间时，您使用的正则表达式有效。因此，你的regexp应该是：

.{16,16}

您的HTML代码：

<input type="text" pattern=".{16,16}" maxlength="16" required/>

您可能希望在this fiddle中看到它。

输入文本始终有效

2 个答案: