Чи є атрибут перевірки мінімальної довжини в HTML5?

608

Здається, minlengthатрибут для <input>поля не працює.

Чи є якийсь інший атрибут у HTML5, за допомогою якого я можу встановити мінімальну довжину значення для полів?

html html5-validation

3

Це не буде відповіддю для кожного поля, але якщо ви просто хочете переконатися, що значення є, ви можете використовувати атрибут "обов'язковий". <type type = "text" name = "input1" обов'язково = "обов'язково" />

— Немає

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. Я просто хотів додати, що атрибут заголовка дозволяє встановити повідомлення для відображення користувачеві, якщо шаблон не дотримано. Інакше буде показано повідомлення за замовчуванням.

— Жоден

11

@ J.Money На ньому все ще написано "Будь ласка, відповідайте бажаному формату: <title>". Чи є спосіб обійти попереднє повідомлення за замовчуванням?

— CᴴᴀZ

59

На жаль, це не підтримується для textareas .

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

— sohaiby

154

Зараз у властивості HTML5 єminlength властивість , а також інтерфейс.validity.tooShort

Обидва тепер увімкнено в останніх версіях усіх сучасних браузерів. Детальніше див. На https://caniuse.com/#search=minlength .

— rhgb
джерело

1

Firefox 44 і досі не реалізований.

— Крістіан Læirbag

2

Досі не підтримується поза Chrome чи Opera. caniuse.com/#search=minlength

— rmcsharry

Це січень 2017 року і досі підтримують лише

— середню тривалість

2

@TrojanName Firefox підтримує minlengthатрибут з версії 51 .

— Лука Детомі

16

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

— chadoh

19

Ось лише рішення для HTML5 (якщо ви хочете перевірити мінімальну довжину 5, максимальну довжину 10 символів)

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

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

— Алі Çarıkçıoğlu
джерело

3

Як встановити користувальницьке повідомлення про помилку, якщо поле не в порядку?

— Basj

2

Для спеціального повідомлення додайте titleатрибут із необхідним повідомленням.

— Шломі Хасід

8

Таку ж patternвідповідь було дано декількома місяцями раніше . Як ця відповідь краща?

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

@DanDascalescu У нього не було тегів форми і чіткого пояснення. Я також включив робочу демонстрацію jsfiddle. (btw 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тегу.

Для textarea: для встановлення max; скористайтесь 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як для входів, так і для текстових областей. Дивіться також цю планку .

— 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, а не елементи у формі. Дивно.

— rmcsharry

2

Я зауважую, що іноді в хромі, коли автозаповнення ввімкнено і поля поля в методі побудови браузера автозаповнення, він обходить правила перевірки мінімальної довжини, тому в цьому випадку вам доведеться відключити автозаповнення за наступним атрибутом:

autocomplete = "вимкнено"

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

— талісони
джерело

Мова не йде про поля паролів.

— Ігор Попов

мова йде про введення HTML, пароль - це справді HTML введення.

— тальсибон

2

Дивіться сторінку http://caniuse.com/#search=minlength , деякі веб-переглядачі можуть не підтримувати цей атрибут.

Якщо значення "типу" є одним із них:

текст, електронна пошта, пошук, пароль, тел або URL (попередження: не включати номер | зараз немає підтримки браузера "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">

Якщо "type" є числом , althougth minlength (/ maxlength) не підтримується, ви можете використовувати атрибут min (/ max) замість нього.

напр.

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

— левініт
джерело

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>

— Хамфрі
джерело

1

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

Оскільки мені потрібно мати лише мінімальні довжини, щоб продовжувати, простий і зручний спосіб - присвоїти це значення іншому дійсному атрибуту вхідного тегу. У такому випадку ви можете використовувати min, maxта та stepвластивості з [type = "number"] входів.

Замість того, щоб зберігати ці обмеження в масиві, простіше знайти його, що зберігається на одному вході, замість того, щоб ідентифікатор елемента відповідав індексу масиву.

— Крістіан Læirbag
джерело

-4

Додаючи як максимум, так і мінімальне значення, ви можете вказати діапазон дозволених значень:

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

— Deepti Gehlot
джерело