html5 最小长度,HTML5中是否有最小长度validation属性？

您可以使用pattern属性 。 required属性也是必需的，否则具有空值的input字段将被排除在约束validation之外 。

如果要创build选项以使用“空白或最小长度”模式，则可以执行以下操作：

现在HTML5规范中有一个minlength属性，以及validity.tooShort接口。

PS这从Firefox 33.0a1和Chrome 38.0.2071.0加拿大还没有实施。

更新 ：HTML5已经稳定，Chrome自40版以来默认启用了minlength和validity.tooShort 。

这里是纯HTML5的解决scheme (如果你想要最小长度5，最大长度10字符validation)

是的，就是这样。 这就像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

Required, Minimum length 3:

我的解决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

新版本：

它扩展了使用(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”

如果“types”的值是其中之一：

文本，电子邮件，search，密码，电话或url (警告：不包括数字 | 没有浏览器支持“电话”现在 – 2017.10)

使用minlength (/ maxlength)属性，它指定最小字符数。

例如。

或使用“模式”属性：

如果“types”是数字 ，则不支持althougth minlength(/ maxlength)，您可以使用min (/ max)属性代替它。

例如。

我写了这个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匹配数组索引。

添加最大值和最小值，您可以指定允许值的范围：