Проверка элемента ввода HTML без какого-либо плагина

Question

Я хотел бы сделать валидацию элементов БЕЗ использования любого плагина валидации.Для начала я определил:

<input type='number' required="required" id='amt_elmt' name='amt_elmt' />

Но я все еще могу набирать любой текст в этом элементе управления (я ожидал, что внутри него может быть напечатано только число);он также принимает пустое значение.

Какой дополнительный код может потребоваться?

Answer 1

Число - это тип ввода HTML5. Это еще не корректно поддерживается всеми браузерами, в большинстве браузеров вы можете вводить что угодно.

Если вы хотите заблокировать что-либо, кроме цифр, пока пользователь печатает, вам понадобится JavaScript для нажатия клавиш.

Если после публикации вы хотите проверить, что используются только цифры, вы можете использовать для этого либо JavaScript, либо PHP.

Answer 2

как уже упоминали другие формы Forms 2.0 или новые типы ввода HTML5 поддерживаются не всеми браузерами ( см. Эту ссылку ).

Я недавно ответил на другой вопрос , касающийся элементов формы HTML 5.Ни один из моих браузеров на рабочем столе (FF, Chrome, IE) или мои мобильные браузеры (FF, браузер Android по умолчанию) не пытались подтвердить, что я использовал цифры, или не ограничивали его номерами.

Ваша лучшая ставка - это проверки на стороне клиента javascript, такие как jquery.validate или любое другое количество библиотек для проверки.

Редактировать: ссылка на библиотеку валидации Microsoft, которая поставляется вместе с Visual Studio, но вы можете загрузить ее с веб-сайта, и она работает довольно хорошо.Я могу опубликовать код о том, как его использовать, если вам это нужно

Edit2: Codez http://jsfiddle.net/qxsS8/

Answer 3

Наконец я обнаружил, что использование javascript (и, возможно, jquery) очень гибко.(Нет зависимости, нет сторонней ошибки, которую трудно решить программисту, который не знает логику плагина).

ссылка на "учебник по проверке формы только в javascript"

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

Answer 4

Вы можете использовать стандартную проверку формы HTML5. Затем для поддержки старых браузеров используйте эту библиотеку:

https://github.com/ericelliott/h5Validate

Для добавления поддержки будет использоваться JavaScript.

Все, что вам нужно добавить на свою страницу, это следующий код:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="jquery.h5validate.js"></script> // You will need to host this somewhere
<script>
    $(function () {
        $('form').h5Validate();
    });
</script>

Работает через: Рабочий стол: IE 9, 8, 7, 6, Chrome, Firefox, Safari и Opera. Проверено на Windows 7 и Mac. Мобильный: iPhone, Android, Palm WebOS

Answer 5

Добавьте обработчики событий Javascript для событий, которые вы хотите обработать (например, onkydown, onkeyup, ...).В этих функциях вы можете получить доступ к значению ввода и удалить ненужные символы.