我使用了最大值和最小值，这对我来说很有效，但我不确定这是否是一种编码方法。

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>

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

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

现在所有现代浏览器的最新版本都启用了这两个功能。具体操作请参见https://caniuse.com/#search=minlength。

我使用maxlength和minlength，无论是否需要，它对我来说都非常适合HTML5。

<输入id=“passcode”类型=“minlength”密码=“8”，maxlength=“10”>

`

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

通过使用模式。

新版本:

它扩展了使用(文本区域和输入)并修复了错误。

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