Все, что вам нужно, это:
<form action="/" id="form">
<input pattern="\d{0,5}([,.]\d{1,2})?" title="max 5 digits and 2 decimals">
<button type="submit">submit</button>
</form>
Это позволит пользователю ввести столько символов, сколько он пожелает, но при проверке формы форма не будет работать, если шаблон не будет удовлетворен.
Шаблон представляет собой регулярное выражение и читается следующим образом: от 0 до 5 цифровых символов и, при необходимости, до двух десятичных знаков.
Кроме того, если ввод не должен быть пустым, вы можете добавить атрибут required, подобный этому
<input ... pattern="" required>
Это также вызывает сбой проверки, если ввод пуст.
Если шаблон не соблюдается, браузер покажет пользователю все, что находится внутри title="".
Поэкспериментируйте с этой скриптой, чтобы увидеть, как отображаются ошибки проверки: https://jsfiddle.net/aqohfsrj /2/
Кроме того, если вы хотите что-то сделать с входным значением с помощью javascript, я рекомендую привязываться к событию submit формы, а не к событиям нажатия кнопки или ввода ввода-keydown.
document.getElementById("form").addEventListener("submit", e => {
// if this code is executed it means the validation passed, otherwise errors
// are displayed to the user and this code is not run.
e.preventDefault(); // <-- to avoid trying to use the form's action i.e. the browser will not navigate.
});
Чтобы понять регулярное выражение, которое я использовал, вы можете увидеть этот файл regex101: https://regex101.com/r/aHLI6u /1
Наконец, рекомендация: старайтесь избегать maxlength для проверки; часто мне приходилось заполнять онлайн-форму, которая запрашивает, например, кредитную карту, и она ограничена maxlength="16", что на первый взгляд звучит как хорошая идея, но что, если вы попытаетесь скопировать свою кредитную карту из заметки, которая у вас есть? или что-то в этом роде, и оно хранилось как 5430-0000-1111-2222 (с тире). Кажется грубым запрещать вставлять больше символов, чем разрешено, когда все, что хотел пользователь, это вставить, затем отредактировать, а затем отправить. Я бы позволил пользователю добавлять столько контента, сколько он хочет, чтобы он мог редактировать на месте, чтобы удалить круглые скобки (для телефонов), удалить знаки валюты (для денег), удалить тире (для кредитных карт) и проверить after< /strong> они отправили форму.
person
santiago arizti
schedule
12.12.2019
