似乎<input> 字段的minlength 属性不起作用。
HTML5 中是否还有其他属性可以帮助我设置字段值的最小长度？
【问题讨论】：
标签： html html5-validation
关注@user123444555621 置顶答案。
HTML5 中有一个minlength 属性，但由于某种原因，它可能并不总是按预期工作。
我的输入类型文本不符合minlength="3" 属性。
通过使用pattern 属性，我设法解决了我的问题。
这是一个使用模式来确保最小长度验证的示例：
const folderNameInput = document.getElementById("folderName");
folderNameInput.addEventListener('focus', setFolderNameValidityMessage);
folderNameInput.addEventListener('input', setFolderNameValidityMessage);
function setFolderNameValidityMessage() {
if (folderNameInput.validity.patternMismatch || folderNameInput.validity.valueMissing) {
folderNameInput.setCustomValidity('The folder name must contain between 3 and 50 chars');
} else {
folderNameInput.setCustomValidity('');
}
}:root {
--color-main-red: rgb(230, 0, 0);
--color-main-green: rgb(95, 255, 143);
}
form input {
border: 1px solid black;
outline: none;
}
form input:invalid:focus {
border-bottom-color: var(--color-main-red);
box-shadow: 0 2px 0 0 var(--color-main-red);
}
form input:not(:invalid):focus {
border-bottom-color: var(--color-main-green);
box-shadow: 0 2px 0 0 var(--color-main-green);
}<form>
<input
type="text"
id="folderName"
placeholder="Your folder name"
spellcheck="false"
autocomplete="off"
required
minlength="3"
maxlength="50"
pattern=".{3,50}"
/>
<button type="submit" value="Create folder">Create folder</button>
</form>更多详情，这里是指向 HTML 模式属性的 MDN 链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
【讨论】：
您可以在输入标签中使用minlength，或者您可以使用正则表达式模式来检查字符数，甚至可以接受输入并检查字符的长度，然后您可以根据您的要求进行限制。
【讨论】：
不是 HTML5，但无论如何都是实用的：如果您碰巧使用 AngularJS，则可以将 ng-minlength（或 data-ng-minlength）用于输入和文本区域。另见this Plunk。
【讨论】：
现在在the HTML5 specification 中有一个minlength 属性，以及validity.tooShort 接口。
现在所有现代浏览器的最新版本都启用了两者。详情请见https://caniuse.com/#search=minlength。
【讨论】：
minLength 属性（与 maxLength 不同）在 HTML5 中本机不存在。但是，有一些方法可以验证包含少于 x 个字符的字段。
这个链接给出了一个使用 jQuery 的例子：http://docs.jquery.com/Plugins/Validation/Methods/minlength
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<label for="field">Required, Minimum length 3: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
【讨论】：
我注意到，有时在 Chrome 中，当自动填充打开并且字段是自动填充浏览器内置方法的字段时，它会绕过最小长度验证规则，因此在这种情况下，您必须通过以下属性禁用自动填充：
autocomplete="off"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
【讨论】：
见http://caniuse.com/#search=minlength。某些浏览器可能不支持此属性。
如果“类型”的值是其中之一：
文本、电子邮件、搜索、密码、电话或 URL（警告：不包括 号码 | 浏览器不支持“电话” - 2017.10)
使用 minlength(/maxlength) 属性。它指定最小字符数。
例如，
<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">
或者使用“模式”属性：
<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">
如果“类型”是number，虽然不支持minlength(/maxlength)，但是可以使用min(/ max) 属性而不是它。
例如，
<input type="number" min="100" max="999" placeholder="input a three-digit number">
【讨论】：
如果希望进行此行为，请始终在输入字段上显示一个小前缀或用户无法删除前缀：
// prefix="prefix_text"
// If the user changes the prefix, restore the input with the prefix:
if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix))
document.getElementById('myInput').value = prefix;
【讨论】：
我使用了 max 和 min 然后是必需的，它对我很有效，但不确定它是否是一种编码方法。
<input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required>
【讨论】：
同时添加最大值和最小值。您可以指定允许值的范围：
<input type="number" min="1" max="999" />
【讨论】：
在我的情况下，我最手动验证并使用 Firefox (43.0.4)，很遗憾，minlength 和 validity.tooShort 不可用。
由于我只需要存储最小长度即可继续操作，一个简单方便的方法是将此值分配给输入标签的另一个有效属性。在这种情况下，您可以使用来自 [type="number"] 输入的 min、max 和 step 属性。
与将这些限制存储在数组中相比，更容易找到它存储在同一输入中，而不是让元素 id 与数组索引匹配。
【讨论】：
minlength 属性现在在most of the browsers 中得到广泛支持。
<input type="text" minlength="2" required>
但是，与其他 HTML5 功能一样，此全景图中缺少 IE11。因此，如果您拥有广泛的 IE11 用户群，请考虑使用在most browsers（包括 IE11）中几乎全面支持的pattern HTML5 属性。
为了有一个好的和统一的实现并且可能是可扩展的或动态的（基于生成 HTML 的框架），我会投票给 pattern 属性：
<input type="text" pattern=".{2,}" required>
使用pattern 时仍有一个小的可用性问题。使用pattern 时，用户将看到非直观（非常通用）的错误/警告消息。见this jsfiddle或以下：
<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
Input with minlength: <input type="text" minlength="2" required name="i1">
<input type="submit" value="Submit">
</form>
<br>
<form action="#">
Input with patern: <input type="text" pattern=".{2,}" required name="i1">
<input type="submit" value="Submit">
</form>例如，在 Chrome 中（但在大多数浏览器中类似），您将收到以下错误消息：
Please lengthen this text to 2 characters or more (you are currently using 1 character)
通过使用minlength 和
Please match the format requested
通过使用pattern。
【讨论】：
我使用了带或不带required 的 maxlength 和 minlength，它对 HTML5 非常有效。
<input id="passcode" type="password" minlength="8" maxlength="10">`
【讨论】：
我使用 jQuery 并结合 HTML5 的 textarea 解决方案需要验证以检查最小长度。
$(document).ready(function(){
$('form textarea[minlength]').on('keyup', function(){
e_len = $(this).val().trim().length
e_min_len = Number($(this).attr('minlength'))
message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
this.setCustomValidity(message)
})
})
<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
【讨论】：
新版本：
它扩展了使用（文本区域和输入）并修复了错误。
// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
function testFunction(evt) {
var items = this.elements;
for (var j = 0; j < items.length; j++) {
if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
items[j].focus();
evt.defaultPrevented;
return;
}
else {
items[j].setCustomValidity('');
}
}
}
}
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
if(!isChrome) {
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', testFunction,true);
forms[i].addEventListener('change', testFunction,true);
}
}
}
【讨论】：
我编写了这段 JavaScript 代码，[minlength.js]：
window.onload = function() {
function testaFunction(evt) {
var elementos = this.elements;
for (var j = 0; j < elementos.length; j++) {
if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
evt.preventDefault();
};
}
}
}
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', testaFunction, true);
}
}
【讨论】：
是的，就是这样。这就像最大长度。 W3.org 文档： http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
如果minlength 不起作用，请使用@Pumbaa80 提到的pattern 属性作为input 标签。
对于文本区域：
用于设置最大值；使用 maxlength 和 min 转到 this link。
你可以在这里找到最大值和最小值。
【讨论】：
您可以使用pattern attribute。 required attribute 也是需要的，否则会从constraint validation 中排除具有空值的输入字段。
<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">
如果您想创建将模式用于“空或最小长度”的选项，您可以执行以下操作：
<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}" required title="Either 0 OR (8 chars minimum)">
【讨论】：
oninvalid="this.setCustomValidity('Your message')"
setCustomValidity，那么即使您更正了输入，它也会继续向您显示错误消息。您可以使用以下onchange 方法来解决此问题。 oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
这里是 HTML5-only 解决方案（如果你想要 minlength 5，maxlength 10 字符验证）
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
【讨论】：
title 属性和所需的消息。
pattern 给出了相同的答案a few months earlier。这个答案如何更好？