<input>字段的minlength属性似乎不起作用。

在HTML中是否有其他属性可以帮助我设置字段值的最小长度?


当前回答

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

其他回答

这是html5的唯一解决方案(如果你想要minlength 5, maxlength 10字符验证)

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

< >形式 <输入模式= "。{5 10}" > <input type="submit" value="Check"></input> > < /形式

不是HTML5,但无论如何都很实用:如果你碰巧使用AngularJS,你可以在输入和文本区域都使用ng-minlength(或data-ng-minlength)。看看这个Plunk。

如果需要这种行为,总是在输入字段上显示一个小前缀,否则用户不能删除前缀:

   // prefix="prefix_text"
   // If the user changes the prefix, restore the input with the prefix:
   if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix))
       document.getElementById('myInput').value = prefix;

在@user123444555621固定答案。

在HTML5中有一个minlength属性,但由于某种原因,它可能并不总是像预期的那样工作。

我有一个情况下,我的输入类型文本不遵守minlength="3"属性。

通过使用pattern属性,我设法解决了这个问题。 下面是一个使用pattern来确保minlength验证的例子:

const folderNameInput = document.getElementById("folderName"); folderNameInput.addEventListener('focus', setFolderNameValidityMessage); folderNameInput.addEventListener('input', setFolderNameValidityMessage); function setFolderNameValidityMessage() { if (folderNameInput.validity.patternMismatch || folderNameInput.validity.valueMissing) { folderNameInput.setCustomValidity('The folder name must contain between 3 and 50 chars'); } else { folderNameInput.setCustomValidity(''); } } :root { --color-main-red: rgb(230, 0, 0); --color-main-green: rgb(95, 255, 143); } form input { border: 1px solid black; outline: none; } form input:invalid:focus { border-bottom-color: var(--color-main-red); box-shadow: 0 2px 0 0 var(--color-main-red); } form input:not(:invalid):focus { border-bottom-color: var(--color-main-green); box-shadow: 0 2px 0 0 var(--color-main-green); } <form> <input type="text" id="folderName" placeholder="Your folder name" spellcheck="false" autocomplete="off" required minlength="3" maxlength="50" pattern=".{3,50}" /> <button type="submit" value="Create folder">Create folder</button> </form>

有关更多详细信息,这里是HTML模式属性的MDN链接:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

你可以在输入标签中使用minlength,或者你可以regex pattern来检查字符的数量,甚至你可以输入并检查字符的长度,然后你可以根据你的要求进行限制。