Is there a minlength validation attribute in HTML5

2019-01-01 04:19发布

站内文章 / Html5

36 0

只靠听说

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

It seems the minlength attribute for an <input> field doesn\'t work.

Is there any other attribute in HTML5 with the help of which I can set the minimal length of a value for fields?

回答1:

You can use the pattern attribute. The required attribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation.

<input pattern=\".{3,}\"   required title=\"3 characters minimum\">
<input pattern=\".{5,10}\" required title=\"5 to 10 characters\">

If you want to create the option to use the pattern for \"empty, or minimum length\", you could do the following:

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

回答2:

There is a minlength property in HTML5 spec now, as well as the validity.tooShort interface.

Both are now enabled in recent versions of all modern browsers. For details, see https://caniuse.com/#search=minlength.

回答3:

Here is HTML5-only solution (if you want minlength 5, maxlength 10 character validation)

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

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

回答4:

Yes, there it is. It\'s like maxlength. W3.org documentation: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

In case minlength doesn\'t work, use the pattern attribute as mentioned by @Pumbaa80 for the input tag.

For textarea: For setting max; use maxlength and for min go to this link.

You will find here both for max and min.

回答5:

minLength attribute (unlike maxLength) does not exist natively in HTML5. However there a some ways to validate a field if it contains less than x characters.

An example is given using jQuery at this link : 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>

回答6:

Not HTML5, but practical anyway: if you happen to use AngularJS, you can use ng-minlength for both inputs and textareas. See also this Plunk.

回答7:

My solution for textarea using jQuery and combining HTML5 required validation to check the minimum length.

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>

回答8:

I used maxlength and minlength with or without required and it worked for me very well for HTML5.

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

回答9:

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);
        }
    }
}

回答10:

See http://caniuse.com/#search=minlength , some browsers may not support this attribute.

If the value of the \"type\" is one of them:

text, email, search, password, tel, or url (warning:not include number | no browser support \"tel\" now - 2017.10)

use minlength(/ maxlength) attribute , it specifies the minimum number of characters.

eg.

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

or use \"pattern\" attribute:

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

If the \"type\" is number, althougth minlength(/ maxlength) is not be supported, you can use min(/ max) attribute instead it.

eg.

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

回答11:

I wrote this JavaScript code, [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);
    }
}

回答12:

In my case, in which I validate the most at hand and using Firefox (43.0.4), minlength and validity.tooShort are not available unfortunately.

But since I only need to have minimum lengths stored to proceed, an easy and handy way is to assign this value to another valid attribute of the input tag. In that case then, you can use min, max, and step of other properly from non-text type inputs (type=\"number\"), but still inputs.

Rather than storing those limits in an array it\'s easier to find it stored in the same input instead of getting the element id to match the array index.

回答13:

I notice that sometimes in chrome when autofill is on and the fields are field by the autofill browser build in method, it bypass the minlength validation rules, so in this case you will have to disable autofill by the following attribute:

autocomplete=\"off\"

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

回答14:

If desire to make this behavior,
always show a small prefix on input field or the user can\'t erase a prefix:

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

回答15:

I used max and min then required and it worked for me very well but what am not sure is if is a but coding method. I hope it helps

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

回答16:

Add both a max and a min value you can specify the range of allowed values:

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

标签： html5 html5-validation