Question

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

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

Answer 1

您可以使用pattern attribute。还需要required attribute，否则将从constraint validation中排除具有空值的输入字段。

<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

现在HTML5 spec中的属于minlength属性，以及validity.tooShort界面。

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

Answer 3

这是HTML5-only解决方案（如果你想要minlength 5，maxlength 10字符验证）

<强> http://jsfiddle.net/xhqsB/102/

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

Answer 4

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

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

对于textarea： 用于设置最大值;使用maxlength和分钟转到this link。

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

Answer 5

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 6

不是HTML5，但实际上还是实用的：如果您碰巧使用 AngularJS ，则可以对输入和textareas使用ng-minlength。另请参阅this Plunk。

Answer 7

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

Answer 8

新版本：

它扩展了使用（textarea和输入）并修复了错误。

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

minlength属性现已在most of the browsers中得到广泛支持。

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

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

要有一个好的统一的实现，并且可能是可扩展的或动态的（基于生成HTML的框架），我将投票赞成pattern属性：

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

使用pattern时，仍有可用性小问题。使用pattern时，用户将看到不直观（非常普通）的错误/警告消息。参见this 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

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

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

`

Answer 11

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

如果＆＃34;的类型＆＃34;就是其中之一：

文字，电子邮件，搜索，密码，电话或网址（警告：不包括数字 | 没有浏览器支持＆＃34; tel＆＃34; 现在 - 2017.10）

使用 minlength （/ maxlength）属性，它指定最小字符数。

例如

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

或使用＆＃34;模式＆＃34;属性：

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

如果＆＃34;键入＆＃34;如果数字，则不支持 minlength （/ maxlength），您可以使用 min （/ max）属性代替它。

例如

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

Answer 12

关注@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 13

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

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

Answer 14

如果希望做出这种行为，
始终在输入字段上显示小前缀或用户无法删除前缀：

   //prefix="prefix_text"
   //if the user change 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 15

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

autocomplete =“off”

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

Answer 16

在我的情况下，我手动验证并使用Firefox（43.0.4），minlength和validity.tooShort不可用。

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

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

Answer 17

我写了这个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 18

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

Answer 19

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

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

HTML5中是否有minlength验证属性？

19 个答案:

minlength.js

HTML