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

443

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

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

  • 2
    Не без JavaScript.
  • 3
    Это не будет ответом для каждого поля, но если вы просто хотите убедиться, что значение есть, вы можете использовать атрибут «required». <input type = "text" name = "input1" обязательный = "обязательный" />
Показать ещё 3 комментария
Теги:
html5-validation

13 ответов

930
Лучший ответ

Вы можете использовать атрибут 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)">
Поделиться
  • 133
    +1 за использование html5 вместо jQuery. Я просто хотел добавить, что атрибут title позволяет вам настроить отображение сообщения для пользователя, если шаблон не соответствует. В противном случае будет показано сообщение по умолчанию.
  • 11
    @ J.Money. Он по-прежнему гласит: «Пожалуйста, выберите нужный формат: <title>». Есть ли способ обойти предыдущее сообщение по умолчанию?
Показать ещё 21 комментарий
93

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

P.S. Это не было реализовано в отношении Firefox 33.0a1 и Chrome 38.0.2071.0 canary.

Обновить. HTML5 был стабильным, а Chrome имеет minlength и validity.tooShort по умолчанию с версии 40.

Поделиться
  • 1
    Firefox 44 и до сих пор не реализован.
  • 2
    Все еще не поддерживается за пределами Chrome или Opera. caniuse.com/#search=minlength
Показать ещё 3 комментария
14

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

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
Поделиться
  • 2
    Как установить пользовательское сообщение об ошибке, если поле не в порядке?
  • 0
    Для произвольного сообщения добавьте атрибут title с нужным сообщением.
Показать ещё 3 комментария
10

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

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

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

Здесь вы найдете как max, так и min.

Поделиться
5

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

Поделиться
  • 0
    Если бы Angular был написан для соответствия стандартам, они бы использовали что-то вроде data-ng-minlength но зачем разработчику заботиться о стандартах? > __>
  • 4
    Уважаемый стандартный подписчик, вы также можете использовать data-ng-minlength .
3

атрибут 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/…
  • 0
    Все еще не поддерживается за пределами Chrome или Opera. caniuse.com/#search=minlength
2

Мое решение для 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>
Поделиться
  • 0
    Очень полезный и элегантный ответ!
1

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

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

текст, адрес электронной почты, поиск, пароль, tel или url (предупреждение: не включать номер | без браузера supprot "tel" - 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">
Поделиться
1

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

Он расширяет использование (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);
        }
    }
}
Поделиться
  • 0
    Спасибо за это элегантное обновленное решение. Работает ли он вне Chrome / Opera, так как они не поддерживают минимальную длину? caniuse.com/#search=minlength Я только что протестировал его на Mac Safari, и он не работает :( Я вижу, что вы добавляете eventListener для браузеров не Chrome / Opera, поэтому, возможно, я делаю что-то не так.
  • 0
    После отладки Safari кажется, что var items = this.elements; возвращает коллекцию FORMS, а не элементы в форме. Weird.
0

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

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
Поделиться
  • 0
    Это не о полях пароля.
  • 0
    речь идет о вводе HTML, пароль действительно является вводом HTML.
0

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

<input type="number" min="1" max="999" />
Поделиться
  • 0
    Это не работает.
0

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

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

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

Поделиться
0

Я написал этот код 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);
    }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню