HTML5中是否有最小长度验证属性?

<input>字段的minlength属性似乎不起作用。

在HTML5中是否有其他属性可以帮助我设置字段值的最小长度?

689819 次浏览
小开

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>
小开
最佳答案

你可以使用# EYZ0属性。# EYZ1属性也是必需的，否则一个空值的输入字段将从约束验证中排除。

<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)">
小开

这是html5专用的解决方案(如果你想要minlength 5, maxlength 10字符验证)

http://jsfiddle.net/xhqsB/102/

    <form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>

小开

现在在HTML5规范中有minlength属性，还有validity.tooShort接口。

现在所有现代浏览器的最新版本都启用了这两个功能。具体请参见https://caniuse.com/#search=minlength。

小开

是的，在那里。就像maxlength。W3.org文档: # EYZ0 < / p >

如果minlength不起作用，则使用@Pumbaa80提到的pattern属性作为input标记。

文本区域的< >强: 用于设置最大值;使用maxlength，最小值使用这个链接，

你会发现这里有最大值和最小值。

小开

我写了这个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);
}
}
小开

不是HTML5，但无论如何都很实用:如果你碰巧使用AngularJS，你可以使用ng-minlength(或data-ng-minlength)作为输入和文本区域。参见这恰好。

小开

新版本:

它扩展了使用(文本区域和输入)并修复了错误。

// 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);
}
}
}
小开

我的解决方案textarea使用jQuery和结合HTML5需要验证，以检查最小长度。

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)
})
})

超文本标记语言

<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
小开

在我的例子中，我使用Firefox(43.0.4)进行手动验证，不幸的是，minlength和validity.tooShort不可用。

由于我只需要存储最小长度就可以继续，一种简单而方便的方法是将这个值赋给输入标记的另一个有效属性。在这种情况下，您可以从[type="number"]输入中使用min， max和step属性。

与其将这些限制存储在数组中，不如将其存储在相同的输入中，而不是获取元素id以匹配数组索引。

小开

同时添加最大值和最小值。您可以指定允许的值的范围:

<input type="number" min="1" max="999" />
小开

我注意到，有时在Chrome中，当自动填充打开时，字段是由自动填充浏览器内置方法填写的，它绕过了最小长度验证规则，所以在这种情况下，你必须通过以下属性禁用自动填充:

自动完成=“off"

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
小开

看到# EYZ0。某些浏览器可能不支持此属性。

如果“;type”的值;是其中之一:

文本，电子邮件，搜索，密码，电话或URL(警告:不包括数量 | 浏览器不支持“tel"现在- 2017.10)

使用最小长度(/ 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">

如果"类型"是数量，虽然最小长度(/ maxlength)是不支持的，你可以使用最小值(/ 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;
小开

我使用了最大值和最小值，这对我来说很有效，但我不确定这是否是一种编码方法。

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
小开

我使用maxlength和minlength，无论是否使用required，它都非常适合我的HTML5。

<input id="passcode" type="password" minlength="8" maxlength="10">

`

小开

minlength属性现在在大多数浏览器中得到广泛支持。

<input type="text" minlength="2" required>

但是，与HTML5的其他功能一样，IE11在这个全景图中是缺失的。所以，如果你有一个广泛的IE11用户基础，可以考虑使用pattern HTML5属性，它几乎在大多数浏览器中得到了全面的支持(包括IE11)。

为了有一个漂亮和统一的实现，可能是可扩展的或动态的(基于生成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。

小开

你可以在输入标签中使用minlength，或者你可以regex模式来检查字符的数量，甚至你可以输入并检查字符的长度，然后你可以根据你的要求进行限制。

小开

跟随@user123444555621固定答案。

在HTML5中有一个minlength属性，但由于某种原因，它可能并不总是像预期的那样工作。

我有一个情况下，我的输入类型文本不服从minlength="3"属性。

通过使用pattern属性，我设法解决了我的问题。 下面是一个使用pattern来确保minlength验证的例子:

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

小开

maxlength最聪明的方法

$("html").on("keydown keyup change", "input", function(){
var maxlength=$(this).attr('maxlength');
if(maxlength){
var value=$(this).val();
if(value.length<=maxlength){
$(this).attr('v',value);
}
else{
$(this).val($(this).attr('v'));
}
}
});     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="10">


提交答案