Есть ли в HTML5 атрибут проверки минимальной длины?

608

Кажется, minlengthатрибут для <input>поля не работает.

Есть ли в HTML5 какой-либо другой атрибут, с помощью которого я могу установить минимальную длину значения для полей?

html html5-validation

— emilan
источник

3

Это не будет ответом для каждого поля, но если вы просто хотите убедиться, что значение есть, вы можете использовать атрибут «required». <input type = "text" name = "input1" required = "required" />

— нет

1

Возможный дубликат: stackoverflow.com/questions/5533053/textarea-character-limit/…

— Web_Designer

7

Этого не существует, но давайте суетимся и получим его! w3.org/Bugs/Public/show_bug.cgi?id=20557

— Эрик Эллиотт,

Вам нужно использовать JS / Jquery, если вы хотите сделать полную реализацию (например, требуется, минимальная длина, сообщение об ошибке при отправке и т. Д.). Safari по-прежнему не полностью поддерживает даже необходимый атрибут, и только Chrome и Opera поддерживают minLength. например, см. caniuse.com/#search=required

— rmcsharry

1326

Вы можете использовать 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)">

— user123444555621
источник

139

+1 за использование html5 вместо jQuery. Я просто хотел добавить, что атрибут title позволяет вам настроить отображение сообщения для пользователя, если шаблон не соответствует. В противном случае будет показано сообщение по умолчанию.

— Нет

11

@ J.Money. Он по-прежнему гласит: «Пожалуйста, укажите требуемый формат: <title>». Есть ли способ обойти предыдущее сообщение по умолчанию?

— CZZ

59

К сожалению, это не поддерживается для текстовых областей .

— 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){}"

— Сохаиби

154

Там являетсяminlength свойство в HTML5 спецификации в настоящее время, а также validity.tooShortинтерфейс.

Оба теперь включены в последних версиях всех современных браузеров. Для получения дополнительной информации см. Https://caniuse.com/#search=minlength .

— rhgb
источник

1

Firefox 44 и до сих пор не реализован.

— Кристиан Лирбаг

2

Все еще не поддерживается за пределами Chrome или Opera. caniuse.com/#search=minlength

— rmcsharry

Это январь 2017 года, и до сих пор только Chrome и Opera поддерживают минимальную длину

— TrojanName

2

@TrojanName Firefox поддерживает minlengthатрибут с версии 51 .

— Лука Детоми

16

Периодические комментарии для обновления статуса в этом ответе переполнения стека менее полезны, чем указывать людям проверять здесь текущую информацию: caniuse.com/#search=minlength

— chadoh

19

Вот решение только для HTML5 (если вы хотите minlength 5, maxlength 10 проверки символов)

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

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

— Али Чарыкчыоглу
источник

3

Как установить пользовательское сообщение об ошибке, если поле не в порядке?

— Basj

2

Для произвольного сообщения добавьте titleатрибут с нужным сообщением.

— Шломи Хасид,

8

Тот же patternответ был дан несколькими месяцами ранее . Как этот ответ лучше?

— Дан Даскалеску

@DanDascalescu У него не было тегов формы и четкого объяснения. Я также включил рабочую демоверсию jsfiddle. (кстати, правила Stackoverflow гласят, что давать подобные ответы не запрещено, если это полезно для сообщества)

— Ali Çarıkçıoğlu

Один из способов дать еще лучший ответ - включить демо-версию в SO в качестве фрагмента кода для запуска .

— Дан Дакалеску

11

Да, это так. Это как макс. Документация W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

В случае, если minlengthэто не работает, используйте patternатрибут, упомянутый @ Pumbaa80 для inputтега.

Для текстовой области: для установки макс; используйте maxlengthи для мин перейдите по этой ссылке .

Вы найдете здесь как для макс и мин.

— SohelAhmedM
источник

8

Я использовал maxlength и minlength с или без, requiredи это отлично сработало для меня в HTML5.

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

Развернуть фрагмент

`

— benaff033
источник

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>

— Валери Штродер
источник

1

«Атрибут minLength (в отличие от maxLength) изначально не существует в HTML5» Да, он существует: w3.org/TR/html5/…

— mikemaccana

Все еще не поддерживается за пределами Chrome или Opera. caniuse.com/#search=minlength

— rmcsharry

5

Не HTML5, но в любом случае практично: если вы используете AngularJS , вы можете использовать ng-minlengthкак для ввода, так и для текстовых областей. Смотрите также этот Plunk .

— mik01aj
источник

Если бы Angular был написан, чтобы соответствовать стандартам, они бы использовали что-то подобное, data-ng-minlengthно зачем разработчику заботиться о стандартах? > __>

— Иоанн,

4

Уважаемый стандартный последователь, вы можете использовать в data-ng-minlengthкачестве колодца .

— mik01aj

4

Мое решение для 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>

— Хип Динь
источник

Очень полезный и элегантный ответ!

— Сильвио Дельгадо

4

minlengthатрибут в настоящее время широко поддерживается в большинстве браузеров .

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

Но, как и с другими функциями HTML5, IE11 отсутствует в этой панораме. Так что, если у вас широкая пользовательская база IE11, рассмотрите возможность использования patternатрибута HTML5, который поддерживается практически во всех браузерах (включая IE11).

Чтобы иметь хорошую и унифицированную реализацию и, возможно, расширяемую или динамичную (основанную на структуре, генерирующей ваш 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.

— Габриэль Петровай
источник

2

Новая версия:

Расширяет использование (textarea и input) и исправляет ошибки.

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

— Карлос Мачадо
источник

Спасибо за это элегантное обновленное решение. Работает ли он вне Chrome / Opera, так как они не поддерживают минимальную длину? caniuse.com/#search=minlength Я только что протестировал его на Mac Safari, и он не работает :( Я вижу, что вы добавляете eventListener для не браузеров Chrome / Opera, поэтому, возможно, я делаю что-то не так.

— rmcsharry

После отладки Safari кажется, что var items = this.elements; возвращает коллекцию FORMS, а не элементы в форме. Weird.

— rmcsharry

2

Я замечаю, что иногда в chrome, когда автозаполнение включено и поля заполнены встроенным в браузер методом автозаполнения методом, он игнорирует правила проверки минимальной длины, поэтому в этом случае вам придется отключить автозаполнение с помощью следующего атрибута:

автозаполнения = «выключено»

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

— talsibony
источник

Это не о полях пароля.

— Игорь Попов

речь идет о вводе HTML, пароль действительно является вводом HTML.

— Талсибоны

2

См. Http://caniuse.com/#search=minlength , некоторые браузеры могут не поддерживать этот атрибут.

Если значение «type» является одним из них:

текст, электронная почта, поиск, пароль, тел или URL (предупреждение: не включать номер | браузер не поддерживает "тел" сейчас - 2017.10)

используйте атрибут minlength (/ maxlength), он определяет минимальное количество символов.

например.

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

или используйте атрибут «pattern»:

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

Если «тип» - это число , то althougth minlength (/ maxlength) не поддерживается, вместо него можно использовать атрибут min (/ max).

например.

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

— levinit
источник

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

— Карлос Мачадо
источник

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;

— Карлос Рафаэль
источник

1

Я использовал max и min, затем требуемый, и он работал для меня очень хорошо, но я не уверен, что это метод кодирования. Я надеюсь, что это помогает

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

— Humphrey
источник

1

В моем случае, когда я проверяю больше всего вручную и использую Firefox (43.0.4), minlengthи validity.tooShort, к сожалению , они недоступны.

Поскольку для продолжения нужно хранить только минимальные длины, простой и удобный способ - присвоить это значение другому допустимому атрибуту входного тега. В этом случае вы можете использовать min, maxи stepсвойства из [type = "number"] входов.

Вместо того, чтобы хранить эти ограничения в массиве, проще найти его сохраненным в том же входном сигнале, вместо того, чтобы получить идентификатор элемента, соответствующий индексу массива.

— Кристиан Лирбаг
источник

-4

Добавьте как максимальное, так и минимальное значение, вы можете указать диапазон допустимых значений:

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

— Дипти Гехлот
источник