<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
当前回答
是的,在那儿。就像maxlength。W3.org文档: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
如果minlength不起作用,可以使用@Pumbaa80提到的模式属性作为输入标记。
文本区域: 用于设置最大值;使用maxlength和min转到这个链接。
你会发现这里有最大值和最小值。
其他回答
现在HTML5规范中有一个minlength属性,以及有效性。tooShort接口。
现在所有现代浏览器的最新版本都启用了这两个功能。具体操作请参见https://caniuse.com/#search=minlength。
这是html5的唯一解决方案(如果你想要minlength 5, maxlength 10字符验证)
http://jsfiddle.net/xhqsB/102/
< >形式 <输入模式= "。{5 10}" > <input type="submit" value="Check"></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);
}
}
}
Minlength属性现在在大多数浏览器中得到广泛支持。
<input type="text" minlength="2" required>
但是,与HTML5的其他功能一样,IE11在这个全景图中是缺失的。所以,如果你有一个广泛的IE11用户基础,考虑使用模式HTML5属性,几乎所有的浏览器(包括IE11)都支持它。
为了有一个漂亮和统一的实现,可能是可扩展的或动态的(基于生成HTML的框架),我会投票给pattern属性:
<input type="text" pattern=".{2,}" required>
在使用模式时,仍然存在一个小的可用性问题。在使用pattern时,用户将看到一条非直观的(非常通用的)错误/警告消息。查看jsfiddle或下面:
在每个表单中输入1个字符并按submit</h3> < / h2 > <形式action = " # " > Input with minlength: < Input type="text" minlength="2" required name="i1"> <input type="submit" value=" submit" > > < /形式 < br > <形式action = " # " > Input with patern: < Input type="text" pattern="。{2,}" required name="i1"> <input type="submit" value=" submit" > > < /形式
例如,在Chrome中(但在大多数浏览器中类似),你会得到以下错误消息:
Please lengthen this text to 2 characters or more (you are currently using 1 character)
通过使用minlength和
Please match the format requested
通过使用模式。
我写了这个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);
}
}