Html HTML5 中是否有 minlength 验证属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10281962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a minlength validation attribute in HTML5?
提问by emilan
It seems the minlengthattribute for an <input>field doesn't work.
字段的minlength属性似乎<input>不起作用。
Is there any other attribute in HTML5 with the help of which I can set the minimal length of a value for fields?
HTML5 中是否还有其他属性可以帮助我设置字段值的最小长度？
回答by user123444555621
You can use the patternattribute. The requiredattributeis also needed, otherwise an input field with an empty value will be excluded from constraint validation.
您可以使用pattern属性。该required属性也是必需的，否则具有空值的输入字段将从约束验证中排除。
<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">
If you want to create the option to use the pattern for "empty, or minimum length", you could do the following:
如果要创建使用“空或最小长度”模式的选项，可以执行以下操作：
<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)">
回答by rhgb
There isa minlengthproperty in HTML5 specnow, as well as the validity.tooShortinterface.
目前是一个minlength房地产HTML5规范现在，还有validity.tooShort接口。
Both are now enabled in recent versions of all modern browsers. For details, see https://caniuse.com/#search=minlength.
现在，所有现代浏览器的最新版本都启用了两者。有关详细信息，请参阅https://caniuse.com/#search=minlength。
回答by Ali ?ar?k??o?lu
Here is HTML5-only solution(if you want minlength 5, maxlength 10 character validation)
这是仅 HTML5 的解决方案（如果您想要 minlength 5，maxlength 10 个字符验证）
http://jsfiddle.net/xhqsB/102/
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
回答by SohelAhmedM
Yes, there it is. It's like maxlength. W3.org documentation: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
是的，它在那里。这就像最大长度。W3.org 文档：http: //www.w3.org/TR/html5/forms.html#attr-fe-minlength
In case minlengthdoesn't work, use the patternattribute as mentioned by @Pumbaa80 for the inputtag.
如果minlength不起作用，请使用pattern@Pumbaa80 提到的属性作为input标签。
For textarea:For setting max; use maxlengthand for min go to this link.
对于 textarea：用于设置 max；使用maxlength和分钟转到此链接。
You will find here both for max and min.
你会在这里找到最大值和最小值。
回答by benaff033
I used maxlength and minlength with or without requiredand it worked for me very well for HTML5.
我使用或不使用 maxlength 和 minlength，required它对我来说非常适合 HTML5。
<input id="passcode" type="password" minlength="8" maxlength="10">`
`
回答by Valéry Stroeder
minLength attribute (unlike maxLength) does not exist natively in HTML5. However there a some ways to validate a field if it contains less than x characters.
minLength 属性（与 maxLength 不同）在 HTML5 中不存在。但是，如果字段包含少于 x 个字符，则有一些方法可以验证该字段。
An example is given using jQuery at this link : http://docs.jquery.com/Plugins/Validation/Methods/minlength
在此链接中使用 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>
回答by mik01aj
Not HTML5, but practical anyway: if you happen to use AngularJS, you can use ng-minlengthfor both inputs and textareas. See also this Plunk.
不是 HTML5，但无论如何都很实用：如果您碰巧使用AngularJS，则可以ng-minlength同时用于输入和文本区域。另请参阅此 Plunk。
回答by Gabriel Petrovay
minlengthattribute is now widely supported in most of the browsers.
minlength属性现在在大多数浏览器中得到广泛支持。
<input type="text" minlength="2" required>
But, as with other HTML5 features, IE11 is missing from this panorama. So, if you have a wide IE11 user base, consider using the patternHTML5 attribute that is supported almost across the board in most browsers(including IE11).
但是，与其他 HTML5 功能一样，此全景图中缺少 IE11。因此，如果您拥有广泛的 IE11 用户群，请考虑使用大多数浏览器（包括 IE11）pattern几乎全面支持的HTML5 属性。
To have a nice and uniform implementation and maybe extensible or dynamic (based on the framework that generate your HTML), I would vote for the patternattribute:
为了有一个漂亮和统一的实现，并且可能是可扩展的或动态的（基于生成 HTML 的框架），我会投票支持该pattern属性：
<input type="text" pattern=".{2,}" required>
There is still a small usability catchwhen using pattern. The user will see a non-intuitive (very generic) error/warning message when using pattern. See this jsfiddleor below:
还有一个小的可用性捕捉使用时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>For example, in Chrome (but similar in most browsers), you will get the following error messages:
例如，在 Chrome 中（但在大多数浏览器中类似），您将收到以下错误消息：
Please lengthen this text to 2 characters or more (you are currently using 1 character)
by using minlengthand
通过使用minlength和
Please match the format requested
by using pattern.
通过使用pattern.
回答by Hiep Dinh
My solution for textarea using jQuery and combining HTML5 required validation to check the minimum length.
我的 textarea 解决方案使用 jQuery 并结合 HTML5 需要验证来检查最小长度。
minlength.js
最小长度.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
HTML
<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
回答by talsibony
I notice that sometimes in chrome when autofill is on and the fields are field by the autofill browser build in method, it bypass the minlength validation rules, so in this case you will have to disable autofill by the following attribute:
我注意到有时在 chrome 中，当自动填充打开并且字段是自动填充浏览器内置方法的字段时，它绕过了最小长度验证规则，因此在这种情况下，您必须通过以下属性禁用自动填充：
autocomplete="off"
自动完成=“关闭”
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
