HTML 中是否有 minlength 验证属性？-解网

问：

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

HTML 中是否有其他属性可以借助它来设置字段值的最小长度？

HTML 验证

3赞 None 8/31/2012

它不会是每个字段的答案，但如果你只是想确保有一个值，你可以使用“required”属性。<input type=“text” name=“input1” required=“required” />

1赞 Web_Designer 2/26/2013

可能的重复项：stackoverflow.com/questions/5533053/textarea-character-limit/...

7赞 Eric Elliott 9/23/2013

它不存在，但让我们大惊小怪并把它弄进去！w3.org/Bugs/Public/show_bug.cgi?id=20557

0赞 rmcsharry 10/13/2016

如果你想做一个完整的实现，你需要使用JS/Jquery（例如，required、minlength、提交时的错误消息等）。Safari 仍然不完全支持必需的属性，只有 Chrome 和 Opera 支持 minLength。例如，见 caniuse.com/#search=required

答：

5赞 Valéry Stroeder 4/23/2012 #1

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>

1411赞 user123444555621 4/24/2012 #2

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

<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)">

146赞 None 8/31/2012

+1 表示使用 html5 而不是 jQuery。我只想补充一点，title 属性允许您设置在不满足模式时向用户显示的消息。否则，将显示默认消息。

12赞 CᴴᴀZ 10/1/2013

@J.Money 它仍然显示“请匹配请求的格式：<title>”。有没有办法绕过之前的默认消息？

62赞 ThiefMaster 11/16/2013

不幸的是，textareas 不支持此功能。

28赞 bigtex777 11/27/2014

@ChaZ @Basj 您可以通过添加以下属性来添加自定义错误消息：oninvalid="this.setCustomValidity('Your message')"

10赞 sohaiby 10/24/2015

如果您输入了无效的输入，并且您正在使用，那么即使在您更正输入后，它也会继续向您显示错误消息。您可以使用以下方法来解决这个问题。oninvalid=“this.setCustomValidity（'字段必须包含至少 5 个字符'）” onchange=“try{setCustomValidity（''）}catch（e）{}”setCustomValidityonchange

24赞 Ali Çarıkçıoğlu 8/12/2013 #3

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

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

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

3赞 Basj 10/8/2014

如果字段不正常，如何设置自定义错误消息？

2赞 Shlomi Hassid 6/13/2015

对于自定义消息，请添加包含所需消息的属性。title

8赞 Dan Dascalescu 9/1/2015

几个月前已经给出了同样的答案。这个答案如何更好？pattern

0赞 Ali Çarıkçıoğlu 1/27/2019

@DanDascalescu 他没有表格标签和明确的解释。我还包含了一个有效的 jsfiddle 演示。（顺便说一句，Stackoverflow 规则说，只要对社区有帮助，就不禁止给出类似的答案）

0赞 Dan Dascalescu 1/28/2019

给出更好答案的一种方法是将 SO 上的演示作为可运行的代码片段包含在内。

174赞 rhgb 6/27/2014 #4

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

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

2赞 ggedde 6/24/2022

我看到了这一点，但它仍然对我不起作用。我也需要设置，但仍然没有针对最小长度进行验证。不知道为什么。

12赞 Sohel Ahmed Mesaniya 7/6/2014 #5

是的，就是这样。这就像 maxlength。W3.org 文档：http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

如果不起作用，请使用 @Pumbaa80 中提到的属性作为标记。minlengthpatterninput

对于 textarea：用于设置最大值;使用和最小值转到此链接。maxlength

您可以在这里找到最大值和最小值。

1赞 Carlos Machado 7/26/2014 #6

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

4赞 mik01aj 9/22/2014 #7

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

2赞 Carlos Machado 3/10/2015 #8

新版本：

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

0赞 rmcsharry 10/13/2016

感谢您提供这个优雅的更新解决方案。它是否在 Chrome/Opera 之外工作，因为它们不支持 minlength？caniuse.com/#search=minlength我刚刚在Mac Safari上测试了它，但它无法:(我看到您正在为非 Chrome/Opera 浏览器添加 eventListener，所以也许我做错了什么。

0赞 rmcsharry 10/13/2016

调试 Safari 后，似乎 var items = this.elements;返回 FORMS 集合，而不是窗体中的项。奇怪。

4赞 Hiep Dinh 1/14/2016 #9

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

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

1赞 Christian Læirbag 1/23/2016 #10

就我而言，我使用Firefox（43.0.4）进行最多手动验证，不幸的是不可用。minlengthvalidity.tooShort

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

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

-4赞 Deepti Gehlot 5/30/2017 #11

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

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

5赞 talsibony 7/18/2017 #12

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

autocomplete=“关闭”

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

4赞 levinit 10/17/2017 #13

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

如果“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">

1赞 Carlos Rafael 5/22/2018 #14

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

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

1赞 Humphrey 6/3/2018 #15

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

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

1赞 Peter Mortensen 8/19/2020

“a but coding method”是什么意思？

12赞 benaff033 10/28/2018 #16

我使用maxlength和minlength，无论是否使用maxlength，它对HTML5都非常有效。required

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

6赞 Gabriel Petrovay 2/24/2019 #17

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

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

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

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

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

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

<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

0赞 Sriram Sundarajan 6/9/2021 #18

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

2赞 Alexandre Desroches 6/10/2021 #19

关注@user123444555621 固定答案。

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

我遇到过输入类型文本不遵守 minlength=“3” 属性的情况。

通过使用该属性，我设法解决了我的问题。下面是使用 pattern 确保最小长度验证的示例：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

0赞 A'dii Sunlay 4/9/2022 #20

maxlength 的最智能方式

$("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">

0赞 Ethan 4/12/2022

如果您有新问题，请单击“提问”按钮提问。如果有助于提供上下文，请包含指向此问题的链接。- 来自评论

0赞 Nasser X 2/9/2023 #21

我使用了带有数字的 follow 标签：

<input type="tel" class="form-control" name="Extension" id="Extension" required maxlength="4" minlength="4" placeholder="4 Digits" />

上一个：name='' 的无效窗体控件不可聚焦

下一个：使用 jQuery 检查输入是否为空

HTML 中是否有 minlength 验证属性？

Is there a minlength validation attribute in HTML?

评论

评论

评论

评论

评论

最小长度 .js

[HTML全

评论

评论