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

新版本:

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

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

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

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

`

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

看到http://caniuse.com/搜索=最小长度。某些浏览器可能不支持此属性。

如果"type"的值是其中之一:

文本，电子邮件，搜索，密码，电话或URL(警告:不包括数字|没有浏览器支持“电话”现在- 2017.10)

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

例如,

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

或者使用"pattern"属性:

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

如果“type”是number，虽然不支持minlength(/ maxlength)，但可以使用min(/ max)属性来代替它。

例如,

<input type="number" min="100" max="999" placeholder="input a three-digit number">

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

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>