如果想做出这种行为, 总是 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;
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);
}
}
16 回答
如果想做出这种行为,
总是 show a small prefix on input field 或 the user can't erase a prefix :
minLength属性(与maxLength不同)在HTML5中本身不存在 . 但是,有一些方法可以验证字段是否包含少于x个字符 .
在此链接中使用jQuery给出了一个示例:http://docs.jquery.com/Plugins/Validation/Methods/minlength
我使用max和min然后需要它对我很有用,但不确定是否是一种编码方法 . 我希望它有所帮助
请参阅http://caniuse.com/#search=minlength,某些浏览器可能不支持此属性 .
如果“类型”的值是其中之一:
text, email, search, password, tel, or url (警告:不包括 number | no browser support "tel" 现在 - 2017.10)
使用 minlength (/ maxlength)属性,它指定最小字符数 .
例如 .
或使用“模式”属性:
如果"type"是 number ,但不支持 minlength (/ maxlength),则可以使用 min (/ max)属性代替它 .
例如 .
添加最大值和最小值,您可以指定允许值的范围:
我注意到有时在chrome中自动填充打开并且字段是自动填充浏览器内置方法的字段时,它会绕过最小长度验证规则,因此在这种情况下,您必须通过以下属性禁用自动填充:
autocomplete="off"
我写了这个JavaScript代码,[minlength.js]:
是的,就是这样 . 这就像maxlength . W3.org文档:http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
如果
minlength
不起作用,请使用@ Pumbaa80提到的pattern
属性作为input
标记 .For textarea: 用于设置最大值;使用
maxlength
和min去this link .你会在这里找到最大和最小 .
新版本:
它扩展了使用(textarea和输入)并修复了错误 .
你可以使用pattern attribute . 还需要required attribute,否则将从constraint validation中排除具有空值的输入字段 .
如果要创建将模式用于“空或最小长度”的选项,则可以执行以下操作:
我使用jQuery的textarea解决方案并结合HTML5需要验证以检查最小长度 .
minlength.js
HTML
在我的情况下,我在手边验证最多并使用Firefox(43.0.4),遗憾的是
minlength
和validity.tooShort
不可用 .但由于我只需要存储最小长度以便继续,因此一种简单方便的方法是将此值分配给输入标记的另一个有效属性 . 在那种情况下,您可以从非文本类型输入(类型= "number")正确使用
min
,max
和step
,但仍然是输入 .不是将这些限制存储在数组中,而是更容易找到它存储在同一输入中,而不是获取元素id以匹配数组索引 .
现在HTML5 spec中有 is
minlength
属性,以及validity.tooShort
接口 .两者现在都在所有现代浏览器的最新版本中启用 . 有关详细信息,请参阅https://caniuse.com/#search=minlength .
Here is HTML5-only solution (如果你想要minlength 5,maxlength 10字符验证)
http://jsfiddle.net/xhqsB/102/
我使用maxlength和minlength,有或没有
required
,它对我来说非常适合HTML5 .`
不是HTML5,但实际上是实用的:如果您碰巧使用 AngularJS ,则可以使用ng-minlength作为输入和textareas . 另见this Plunk .