HTML中是否有minlength验证属性？

Question

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

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

Answer 1

您可以使用pattern属性。 还需要required属性，否则具有空值的输入字段将从约束验证中排除。

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

如果要创建使用“空或最小长度”模式的选项，可以执行以下操作：

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">

Answer 2

有一个minlength物业HTML5规范现在，还有validity.tooShort接口。

现在，所有现代浏览器的最新版本都启用了两者。 有关详细信息，请参阅https://caniuse.com/#search=minlength 。

Answer 3

这是仅 HTML5 的解决方案（如果您想要 minlength 5，maxlength 10 个字符验证）

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>

Answer 4

是的，它在那里。 这就像最大长度。 W3.org 文档： http : //www.w3.org/TR/html5/forms.html#attr-fe-minlength

如果minlength不起作用，请使用 @Pumbaa80 提到的pattern属性作为input标签。

对于 textarea：用于设置 max； 使用maxlength和 min 转到此链接。

你会在这里找到最大值和最小值。

Answer 5

我在required或不需要的情况下使用了 maxlength 和 minlength，它对我来说非常适合 HTML5。

 <input id="passcode" type="password" minlength="8" maxlength="10">

`

Answer 6

minLength 属性（与 maxLength 不同）在 HTML5 中不存在。 但是，如果字段包含少于 x 个字符，则有一些方法可以验证该字段。

在此链接中使用 jQuery 给出了一个示例： http : //docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
        <script type="text/javascript">
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });;
        </script>

        <script>
            $(document).ready(function(){
                $("#myform").validate({
                    rules: {
                        field: {
                            required: true,
                            minlength: 3
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="myform">
            <label for="field">Required, Minimum length 3: </label>
            <input class="left" id="field" name="field" />
            <br/>
            <input type="submit" value="Validate!" />
        </form>
    </body>

</html>

Answer 7

不是 HTML5，但无论如何都很实用：如果您碰巧使用AngularJS ，则可以对输入和文本区域使用ng-minlength （或data-ng-minlength ）。 另请参阅此 Plunk 。

Answer 8

我注意到有时在 Chrome 中，当自动填充打开并且字段是自动填充浏览器内置方法的字段时，它会绕过最小长度验证规则，因此在这种情况下，您必须通过以下属性禁用自动填充：

自动完成=“关闭”

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />

Answer 9

minlength属性现在在大多数浏览器中得到广泛支持。

<input type="text" minlength="2" required>

但是，与其他 HTML5 功能一样，此全景图中缺少 IE11。 因此，如果您拥有广泛的 IE11 用户群，请考虑使用大多数浏览器（包括 IE11）几乎全面支持的pattern HTML5 属性。

为了有一个漂亮和统一的实现，并且可能是可扩展的或动态的（基于生成 HTML 的框架），我会投票支持pattern属性：

<input type="text" pattern=".{2,}" required>

使用pattern时仍然有一个小的可用性问题。 使用pattern时，用户将看到非直观（非常通用）的错误/警告消息。 请参阅此 jsfiddle或以下内容：

 <h3>In each form type 1 character and press submit</h3> </h2> <form action="#"> Input with minlength: <input type="text" minlength="2" required name="i1"> <input type="submit" value="Submit"> </form> <br> <form action="#"> Input with patern: <input type="text" pattern=".{2,}" required name="i1"> <input type="submit" value="Submit"> </form>

例如，在 Chrome 中（但在大多数浏览器中类似），您将收到以下错误消息：

Please lengthen this text to 2 characters or more (you are currently using 1 character)

通过使用minlength和

Please match the format requested

通过使用pattern 。

Answer 10

我的 textarea 解决方案使用 jQuery 并结合 HTML5 需要验证来检查最小长度。

最小长度.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>

Answer 11

请参阅http://caniuse.com/#search=minlength 。 某些浏览器可能不支持此属性。

---

如果“类型”的值是其中之一：

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

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

例如，

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

或者使用“模式”属性：

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

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

例如，

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

Answer 12

新版本：

它扩展了使用（textarea 和 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);
        }
    }
}

Answer 13

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

Answer 14

就我而言，我在其中验证了大部分手动和使用Firefox（43.0.4）， minlength和validity.tooShort不可不幸。

由于我只需要存储最小长度即可继续，一个简单方便的方法是将此值分配给输入标签的另一个有效属性。 在这种情况下，您可以使用 [type="number"] 输入中的min 、 max和step属性。

与将这些限制存储在数组中相比，更容易找到存储在同一输入中的它，而不是获取元素 id 以匹配数组索引。

Answer 15

如果需要进行此行为，请始终在输入字段上显示一个小前缀，否则用户无法删除前缀：

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

Answer 16

我使用了 max 和 min 然后需要，它对我很有效，但我不确定它是否是一种编码方法。

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

Answer 17

以下@ user123444555621固定答案。

HTML5 中有一个minlength属性，但由于某种原因，它可能并不总是按预期工作。

我有一个案例，我的输入类型文本不遵守minlength="3"属性。

通过使用pattern属性，我设法解决了我的问题。 这是使用模式来确保最小长度验证的示例：

 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

Answer 18

您可以在输入标签中使用minlength或者您可以使用正则表达式模式来检查字符数，甚至您可以输入并检查字符的长度，然后您可以根据您的要求进行限制。

Answer 19

最大长度的最聪明方法

 $("html").on("keydown keyup change", "input", function(){ var maxlength=$(this).attr('maxlength'); if(maxlength){ var value=$(this).val(); if(value.length<=maxlength){ $(this).attr('v',value); } else{ $(this).val($(this).attr('v')); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" maxlength="10">

Answer 20

添加最大值和最小值。 您可以指定允许值的范围：

<input type="number" min="1" max="999" />