Есть ли в HTML5 атрибут проверки минимальной длины?
Кажется minlength атрибут для <input> поле не работает.
Есть ли какой-либо другой атрибут в HTML5, с помощью которого я могу установить минимальную длину значения для полей?
21 ответ
Вы можете использовать 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)">
Есть minlength свойство в спецификации HTML5 сейчас, а также validity.tooShort интерфейс.
Оба теперь включены в последних версиях всех современных браузеров. Подробнее см. https://caniuse.com/.
Вот решение только для HTML5 (если вы хотите minlength 5, maxlength 10 проверки символов)
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
Да, это так. Это как макс. Документация W3.org: http://www.w3.org/TR/html5/forms.html
В случае minlength не работает, используйте pattern атрибут, как упомянуто @Pumbaa80 для input тег.
Для текстовой области: для установки макс; использование maxlength и за мин перейдите по этой ссылке.
Вы найдете здесь как для макс и мин.
Я использовал maxlength и minlength с или без required и это работало для меня очень хорошо для HTML5.
<input id="passcode" type="password" minlength="8" maxlength="10">`
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,
Я замечаю, что иногда в chrome, когда автозаполнение включено и поля заполнены встроенным в браузер методом автозаполнения методом, он игнорирует правила проверки минимальной длины, поэтому в этом случае вам придется отключить автозаполнение с помощью следующего атрибута:
автозаполнения ="выключено"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
Атрибут 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>
Не HTML5, но в любом случае практично: если вы используете AngularJS, вы можете использовать ng-minlength для обоих входов и текстовых областей. Смотрите также этот Plunk.
См. http://caniuse.com/, некоторые браузеры могут не поддерживать этот атрибут.
Если значение "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">
Мое решение для 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>
После @user123444555621 закрепленный ответ.
Eсть
minlength атрибут в HTML5, но по какой-то причине он может не всегда работать должным образом.
У меня был случай, когда текст моего типа ввода не подчинялся
minlength="3" имущество.
Используя
patternattribute Мне удалось исправить мою проблему.Вот пример использования шаблона для проверки минимальной длины:
Новая версия:
Расширяет использование (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);
}
}
}
Я использовал max и min, затем требуемый, и он работал для меня очень хорошо, но я не уверен, что это метод кодирования. Я надеюсь, что это помогает
<input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required>
Если желание сделать это поведение,
всегда показывать небольшой префикс в поле ввода, иначе пользователь не может стереть префикс:
//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;
Я написал этот код 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);
}
}
В моем случае, когда я проверяю больше всего под рукой и использую Firefox (43.0.4), minlength а также validity.tooShort к сожалению не доступны.
Но так как мне нужно сохранить только минимальные длины для продолжения, простой и удобный способ - присвоить это значение другому допустимому атрибуту входного тега. В этом случае вы можете использовать min, max, а также step других правильно из нетекстовых вводов типа (type="number"), но все еще вводов.
Вместо того, чтобы хранить эти ограничения в массиве, проще найти его сохраненным на том же входе, вместо того, чтобы получить идентификатор элемента, соответствующий индексу массива.
Я использовал следующий тег с номерами:
<input type="tel" class="form-control" name="Extension" id="Extension" required maxlength="4" minlength="4" placeholder="4 Digits" />
Ты можешь использовать
minlength в теге ввода, или вы можете использовать шаблон регулярного выражения, чтобы проверить количество символов, или даже вы можете ввести ввод и проверить длину символа, а затем вы можете ограничить его в соответствии с вашими требованиями.
Добавьте как максимальное, так и минимальное значение, вы можете указать диапазон допустимых значений:
<input type="number" min="1" max="999" />