HTML5中是否有最小长度validation属性？
看来<input>字段的minlength属性不起作用。
是否有任何其他HTML5的帮助下，我可以设置字段值的最小长度的属性？
您可以使用pattern属性 。 required属性也是必需的，否则具有空值的input字段将被排除在约束validation之外 。
<input pattern=".{3,}" required title="3 characters minimum"> <input pattern=".{5,10}" required title="5 to 10 characters">
如果要创build选项以使用“空白或最小长度”模式，则可以执行以下操作：
<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属性，以及validity.tooShort接口。
PS这从Firefox 33.0a1和Chrome 38.0.2071.0加拿大还没有实施。
更新 ：HTML5已经稳定，Chrome自40版以来默认启用了minlength和validity.tooShort 。
这里是纯HTML5的解决scheme （如果你想要最小长度5，最大长度10字符validation）
http://jsfiddle.net/xhqsB/102/
<form> <input pattern=".{5,10}"> <input type="submit" value="Check"></input> </form>
是的，就是这样。 这就像maxlength。 W3.org文档： http : //www.w3.org/TR/html5/forms.html#attr-fe-minlength
在minlength不起作用的情况下，使用@ Pumbaa80提到的pattern属性作为input标签。
对于textarea：设置最大值; 使用maxlength和分钟去这个链接 。
你会发现这里最大和最小。
不是HTML5，但实际上无论如何：如果您碰巧使用AngularJS ，则可以将ng-minlength用于input和textareas。 另见这个Plunk 。
minLength属性（不像maxLength）在HTML5中本身不存在。 但是，有一些方法可以validation字段是否包含less于x个字符。
在此链接中使用jQuery给出了一个示例： http : //docs.jquery.com/Plugins/Validation/Methods/minlength
<html> <head> <script src="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>
我的解决schemetextarea使用jQuery和组合HTML5需要validation来检查最小长度。
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>
新版本：
它扩展了使用（textarea和input）并修复了错误。
// 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); } } }
我注意到，有时候在自动填充的时候在chrome中，而且字段是由自动填充浏览器内置方法实现的，所以它会绕过最小长度validation规则，所以在这种情况下，您将不得不通过以下属性禁用自动填充：
自动填充=“closures”
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
看http://caniuse.com/#search=minlength ，有些浏览器可能不支持这个属性。
如果“types”的值是其中之一：
文本，电子邮件，search，密码，电话或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">
如果“types”是数字 ，则不支持althougth minlength（/ maxlength），您可以使用min （/ max）属性代替它。
例如。
<input type="number" min="100" max="999" placeholder="input a three-digit number">
我写了这个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); } }
在我的情况下，我最近手头validation并使用Firefox（43.0.4），不幸的是，minlength和validity.tooShort不可用。
但是由于我只需要保存最小长度，所以一个简单而方便的方法是将此值分配给input标记的另一个有效属性。 那么在这种情况下，你可以从非文本types的input（type =“number”）中正确地使用min ， max和step ，但仍然是input。
而不是将这些限制存储在数组中，而是将其存储在相同的input中，而不是使元素ID匹配数组索引。
添加最大值和最小值，您可以指定允许值的范围：
<input type="number" min="1" max="999" />
