似乎字段的minlength属性<input>不起作用。
HTML5 中是否还有其他属性可以帮助我设置字段值的最小长度？
问问题
673499 次
19 回答
1384
您可以使用pattern属性。该required属性也是必需的，否则具有空值的输入字段将被排除在约束验证之外。
<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)">
于 2012-04-24T08:24:58.653 回答
165
现在HTML5 规范中有一个minlength属性，还有接口。validity.tooShort
现在，所有现代浏览器的最新版本都启用了两者。有关详细信息，请参阅https://caniuse.com/#search=minlength。
于 2014-06-27T09:31:18.620 回答
21
这是仅限 HTML5 的解决方案（如果您想要 minlength 5，maxlength 10 字符验证）
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
于 2013-08-12T11:02:40.910 回答
12
是的，就是这样。这就像最大长度。W3.org 文档： http ://www.w3.org/TR/html5/forms.html#attr-fe-minlength
如果minlength不起作用，请使用pattern@Pumbaa80 提到的属性作为input标签。
对于 textarea：
用于设置最大值；使用maxlengthand for min 转到此链接。
你会在这里找到最大值和最小值。
于 2014-07-06T10:52:13.877 回答
9
我使用了带或不带的 maxlength 和 minlength，required它对 HTML5 非常有用。
<input id="passcode" type="password" minlength="8" maxlength="10">`
于 2018-10-27T16:47:14.883 回答
5
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>
于 2012-04-23T14:11:47.267 回答
5
不是 HTML5，但无论如何都是实用的：如果你碰巧使用AngularJS，你可以使用ng-minlength(or data-ng-minlength) 作为输入和文本区域。另请参阅此 Plunk。
于 2014-09-22T12:04:52.853 回答
5
我注意到有时在 Chrome 中，当自动填充打开并且字段是自动填充浏览器内置方法的字段时，它会绕过最小长度验证规则，因此在这种情况下，您必须通过以下属性禁用自动填充：
自动完成=“关闭”
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
于 2017-07-18T09:02:34.777 回答
5
minlength现在大多数浏览器都广泛支持属性。
<input type="text" minlength="2" required>
但是，与其他 HTML5 功能一样，此全景图中缺少 IE11。因此，如果您拥有广泛的 IE11 用户群，请考虑使用大多数浏览器（包括 IE11）pattern几乎全面支持的 HTML5 属性。
为了有一个好的和统一的实现并且可能是可扩展的或动态的（基于生成你的 HTML 的框架），我会投票给这个pattern属性：
<input type="text" pattern=".{2,}" required>
使用pattern. _ _ 用户在使用pattern. 请参阅此 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.
于 2019-02-24T14:32:43.823 回答
4
我使用 jQuery 和结合 HTML5 的 textarea 解决方案需要验证来检查最小长度。
minlength.js
$(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)
})
})
HTML
<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
于 2016-01-13T17:47:42.333 回答
4
请参阅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">
于 2017-10-17T12:07:14.277 回答
2
新版本：
它扩展了使用（文本区域和输入）并修复了错误。
// 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);
}
}
}
于 2015-03-09T16:07:25.193 回答
1
我写了这段 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);
}
}
于 2014-07-25T16:17:24.827 回答
1
在我的情况下，我最手动验证并使用 Firefox (43.0.4)，不幸minlength的validity.tooShort是不可用。
由于我只需要存储最小长度即可继续进行，因此一种简单方便的方法是将此值分配给输入标签的另一个有效属性。在这种情况下，您可以使用[type="number"] 输入中的min、max和属性。step
与其将这些限制存储在数组中，不如更容易找到它存储在相同的输入中，而不是让元素 id 与数组索引匹配。
于 2016-01-22T21:03:49.860 回答
1
如果需要进行此行为，请始终在输入字段上显示一个小前缀，否则用户无法删除前缀：
// 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;
于 2018-05-22T06:17:45.977 回答
1
我使用了 max 和 min 然后需要，它对我很有效，但不确定它是否是一种编码方法。
<input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required>
于 2018-06-02T19:08:34.213 回答
1
关注@ 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
于 2021-06-09T19:57:46.920 回答
0
您可以minlength在输入标签中使用，也可以使用正则表达式模式来检查字符数，甚至可以输入并检查字符的长度，然后您可以根据您的要求进行限制。
于 2021-06-08T17:30:50.463 回答
-4
添加最大值和最小值。您可以指定允许值的范围：
<input type="number" min="1" max="999" />
于 2017-05-30T08:33:38.083 回答