html5 minlength,HTML5中是否有minlength验证属性？

回答(16)

3 years ago

如果想做出这种行为，

总是 show a small prefix on input field 或 the user can't erase a prefix ：

//prefix="prefix_text"

//if the user change the prefix, restore the input with the prefix:

if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix))

document.getElementById('myInput').value = prefix;

3 years ago

minLength属性(与maxLength不同)在HTML5中本身不存在 . 但是，有一些方法可以验证字段是否包含少于x个字符 .

jQuery.validator.setDefaults({

debug: true,

success: "valid"

});;

$(document).ready(function(){

$("#myform").validate({

rules: {

field: {

required: true,

minlength: 3

}

}

});

});

Required, Minimum length 3:

3 years ago

我使用max和min然后需要它对我很有用，但不确定是否是一种编码方法 . 我希望它有所帮助

3 years ago

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

text, email, search, password, tel, or url (警告：不包括 number | no browser support "tel" 现在 - 2017.10)

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

例如 .

或使用“模式”属性：

如果"type"是 number ，但不支持 minlength (/ maxlength)，则可以使用 min (/ max)属性代替它 .

例如 .

3 years ago

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

3 years ago

我注意到有时在chrome中自动填充打开并且字段是自动填充浏览器内置方法的字段时，它会绕过最小长度验证规则，因此在这种情况下，您必须通过以下属性禁用自动填充：

autocomplete="off"

3 years ago

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

}

}

3 years ago

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

For textarea: 用于设置最大值;使用 maxlength 和min去this link .

你会在这里找到最大和最小 .

3 years ago

新版本：

它扩展了使用(textarea和输入)并修复了错误 .

// 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);

}

}

}

3 years ago

如果要创建将模式用于“空或最小长度”的选项，则可以执行以下操作：

3 years ago

我使用jQuery的textarea解决方案并结合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)

})

})

HTML

3 years ago

在我的情况下，我在手边验证最多并使用Firefox(43.0.4)，遗憾的是 minlength 和 validity.tooShort 不可用 .

但由于我只需要存储最小长度以便继续，因此一种简单方便的方法是将此值分配给输入标记的另一个有效属性 . 在那种情况下，您可以从非文本类型输入(类型= "number")正确使用 min ， max 和 step ，但仍然是输入 .

不是将这些限制存储在数组中，而是更容易找到它存储在同一输入中，而不是获取元素id以匹配数组索引 .

3 years ago

现在HTML5 spec中有 is minlength 属性，以及 validity.tooShort 接口 .

3 years ago

Here is HTML5-only solution (如果你想要minlength 5，maxlength 10字符验证)

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

3 years ago

我使用maxlength和minlength，有或没有 required ，它对我来说非常适合HTML5 .

`

3 years ago

不是HTML5，但实际上是实用的：如果您碰巧使用 AngularJS ，则可以使用ng-minlength作为输入和textareas . 另见this Plunk .