HTML中是否有最小长度验证属性?

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

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

当前回答

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

2014-07-25 16:17:24

其他回答

我的解决方案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>

2016-01-13 17:47:42

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>

2012-04-23 14:11:47

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

2021-06-08 17:30:50

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

现在所有现代浏览器的最新版本都启用了这两个功能。具体操作请参见https://caniuse.com/#search=minlength。

2014-06-27 09:31:18

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

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

但是，与HTML5的其他功能一样，IE11在这个全景图中是缺失的。所以，如果你有一个广泛的IE11用户基础，考虑使用模式HTML5属性，几乎所有的浏览器(包括IE11)都支持它。

为了有一个漂亮和统一的实现，可能是可扩展的或动态的(基于生成HTML的框架)，我会投票给pattern属性:

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

在使用模式时，仍然存在一个小的可用性问题。在使用pattern时，用户将看到一条非直观的(非常通用的)错误/警告消息。查看jsfiddle或下面:

在每个表单中输入1个字符并按submit</h3> < / h2 > <形式action = " # " > Input with minlength: < Input type="text" minlength="2" required name="i1"> <input type="submit" value=" submit" > > < /形式 < br > <形式action = " # " > Input with patern: < Input type="text" pattern="。{2，}" required name="i1"> <input type="submit" value=" submit" > > < /形式

例如，在Chrome中(但在大多数浏览器中类似)，你会得到以下错误消息:

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

通过使用minlength和

Please match the format requested

通过使用模式。

2019-02-24 14:32:43

HTML中是否有最小长度验证属性?

推荐文章

最新文章

标签