HTML5中是否有一个minlength验证属性？

608

似乎该字段的minlength属性<input>无效。

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

html  html5-validation 
— 艾米伦
source
3
它不会是每个字段的答案，但是如果您只想确保有一个值，则可以使用“ required”属性。<input type =“ text” name =“ input1” required =“ required” />
— 无
1
— Web_Designer
7
它不存在，但是让我们大惊小怪并加入进来吧！w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
如果要执行完整的实现（例如，必填，minlength，提交时的错误消息等），则需要使用JS / Jquery。Safari甚至不完全支持必需的属性，仅Chrome和Opera支持minLength。例如，请参见caniuse.com/#search=required
— rmcsharry's October

Answers:

1325

您可以使用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)">
— 用户123444555621
source
139
+1用于使用html5而不是jQuery。我只是想补充一点，title属性允许您设置消息，如果不符合模式则显示给用户。否则，将显示默认消息。
— 无
11
@ J.Money它仍然显示“请匹配请求的格式：<title>”。有没有办法绕过以前的默认消息？
— 2013年
59
不幸的是，textareas不支持此功能。
— ThiefMaster
27
@ChaZ @Basj您可以通过添加以下属性来添加自定义错误消息：oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
如果您输入的输入无效并且正在使用setCustomValidity，那么即使您更正了输入，它也会继续向您显示错误消息。您可以使用以下onchange方法来解决此问题。oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby
154

目前是一个minlength房地产HTML5规范现在，还有validity.tooShort接口。

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

— g
source
1
Firefox 44仍未实现。
— ChristianLæirbag'16
2
Chrome或Opera外部仍不支持。caniuse.com/#search=minlength
— rmcsharry
这是2017年1月，仍然只有Chrome和Opera支持最小长度
— TrojanName
2
@TrojanName Firefox minlength自版本51开始支持属性。
— 卡·德托米
16
定期评论以更新此Stack Overflow答案的状态比告诉人们在此处检查当前信息没有
— 太大用
19

这是仅HTML5的解决方案（如果您要最小长度5，最大长度10个字符验证）

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— 阿里Çarıkçıoğlu
source
3
如果该字段不正确，如何设置自定义错误消息？
— Basj 2014年
2
对于自定义消息，请添加title带有必需消息的属性。
— Shlomi Hassid 2015年
8
几个月前pattern已经给出了相同的答案。这个答案如何更好？
— Dan Dascalescu 2015年
@DanDascalescu他没有表格标签和清晰的解释。我还包括了一个可运行的jsfiddle演示。（顺便说一句，Stackoverflow规则说，只要它对社区有所帮助，就不应该给出类似的答案）
— AliÇarıkçıoğlu19年
给出更好答案的一种方法是，在SO上包含此演示作为可运行的代码段。
— Dan Dascalescu
8

无论是否使用maxlength和minlength，required它对于HTML5都非常适用。

<input id="passcode" type="password" minlength="8" maxlength="10">
展开摘要

`

— benaff033
source
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>
— 瓦莱里·斯特德（ValéryStroeder）
source
1
“ minLength属性（不同于maxLength）在HTML5中本身不存在”是的：w3.org/TR/html5/…–
— mikemaccana
Chrome或Opera外部仍不支持。caniuse.com/#search=minlength
— rmcsharry16年
4

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

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>
— 希普·丁
source
非常有用且优雅的答案！
— Silvio Delgado
4

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

<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。

— 加布里埃尔·彼得罗维（Gabriel Petrovay）
source
2

新版本：

它扩展了用法（文本区域和输入）并修复了错误。

// 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);
        }
    }
}
— 卡洛斯·马查多（Carlos Machado）
source
感谢您提供的优雅的更新解决方案。由于它们不支持minlength，因此可以在Chrome / Opera之外运行吗？caniuse.com/#search=minlength 我只是测试它在Mac上的Safari，它不工作:(我看到你所添加的非浏览器/ Opera浏览器的事件监听，所以也许我做错了什么。
— rmcsharry
在调试Safari之后，似乎var项目= this.elements;。返回FORMS集合，而不是表单中的项目。奇怪的。
— rmcsharry16年
2

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

autocomplete =“ off” 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— 塔西伯尼
source
这与密码字段无关。
— 伊戈尔·波波夫
它是关于HTML输入的，密码的确是HTML输入的。
— 塔尔西伯尼
2

请参阅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，则不支持算法最小长度（/ maxlength），可以使用最小（/ max）属性代替。

例如。

<input type="number" min="100" max="999" placeholder="input a three-digit number">
— 左旋
source
1

我编写了以下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);
    }
}
— 卡洛斯·马查多（Carlos Machado）
source
1

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

   //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;
— 卡洛斯·拉斐尔
source
1

我使用了max和min，然后使用了required，它对我来说很好，但是不确定是不是一种编码方法。希望对您有所帮助

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
— 汉弗莱
source
1

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

由于只需要存储最小长度即可继续，因此一种简便的方法是将此值分配给输入标签的另一个有效属性。在这种情况下，然后，可以使用min，max和step从[类型=“号码”]的输入特性。

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

— 克里斯蒂安·莱尔巴格
source
-4

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

<input type="number" min="1" max="999" />
— Deepti Gehlot
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.