638

フィールドのminlength属性が<input>機能していないようです。

フィールドの値の最小長を設定できるHTML5の他の属性はありますか？

4

19 に答える 19

1384

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)">
于 2012-04-24T08:24:58.653 に答える
165

現在、 HTML5 仕様には、インターフェイスと同様にプロパティminlengthがあります。validity.tooShort

現在、最新のすべてのブラウザーの最近のバージョンで両方が有効になっています。詳細については、https://caniuse.com/#search=minlengthを参照してください。

于 2014-06-27T09:31:18.620 に答える
21

これは HTML5 のみのソリューションです (minlength 5、maxlength 10 文字の検証が必要な場合)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
于 2013-08-12T11:02:40.910 に答える
9

maxlength と minlength の有無にかかわらず使用しrequiredましたが、HTML5 では非常にうまく機能しました。

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

`

于 2018-10-27T16:47:14.883 に答える
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>
于 2012-04-23T14:11:47.267 に答える
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>
于 2016-01-13T17:47:42.333 に答える
2

New version:

It extends the use (textarea and input) and fixes bugs.

// 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);
        }
    }
}
于 2015-03-09T16:07:25.193 に答える
1

私の場合、最も手動で Firefox (43.0.4) を使用して検証しており、minlength残念validity.tooShortながら利用できません。

最小限の長さを保存するだけで処理が進むため、この値を入力タグの別の有効な属性に割り当てるのが簡単で便利な方法です。その場合、[type="number"] 入力からmin、max、およびプロパティを使用できます。step

これらの制限を配列に格納するよりも、要素 ID を取得して配列インデックスと一致させるよりも、同じ入力に格納されている方が簡単に見つけることができます。

于 2016-01-22T21:03:49.860 に答える