Какую библиотеку JavaScript использовать для проверки формы на стороне клиента?

Question

На протяжении многих лет я немного занимался простым JavaScript, но еще не использовал библиотеки JavaScript / AJAX. Для некоторых новых вещей, над которыми я работаю, я бы хотел использовать библиотеку js для проверки клиентской формы и узнать, какой из них лучше для этого. В лучшем случае моими критериями были бы: быстрый и легкий в освоении, небольшой размер, совместимый со всеми популярными браузерами.

Редактировать: Спасибо за предложения ASP, но они не имеют отношения к мне. Извините, я изначально не упоминал об этом, но сервер представляет собой Linux-коробку с Apache и PHP. Как я знаю, я планирую выполнить проверку входных данных на стороне сервера, но хочу, чтобы проверка на стороне клиента улучшала работу пользователей и максимально избегала того, чтобы сервер отклонял неверные входные данные.

Редактировать 2: Извините, я не отвечал в течение нескольких месяцев! Другие приоритеты подошли и отвлекли меня от этого. В итоге я выполнил свои собственные процедуры проверки - в дополнение к хорошим моментам, изложенным в некоторых ответах, некоторые из проверяемых элементов редко используются в других приложениях, и я не смог найти библиотеку с включенным проверочным видом .

Answer 1

Вы можете использовать jQuery , и это Плагин проверки .

Answer 2

Я не использую библиотеки сам, но углубился в некоторые (например, prototype, (yui-) ext, казалось бы вездесущий jquery, mootools), чтобы извлечь из них уроки и извлечь некоторые функции или шаблоны, которые они предлагают. Библиотеки (так называемые «фреймворки») содержат много функций, которые мне никогда не нужны, поэтому я написал свой собственный набор функций. Проверку форм довольно сложно стандартизировать (за исключением, возможно, таких вещей, как номера телефонов или поля адресов электронной почты), поэтому я не думаю, что фреймворк также поможет в этом. Мой совет - проверить, предлагает ли одна из библиотек всю функциональность, которую вы ищете, и / или использовать / переписать / скопировать функции, которые вы можете использовать из них. Для большинства библиотек с открытым исходным кодом можно загрузить несжатый источник.

Надо сказать (кстати, и, возможно, уже всем известно), что проверка формы на стороне клиента считается недостаточной. Вам также нужно проверить сервер ввода.

Answer 3

До библиотек AJAX я использовал Validation.JS от Matthew "Matt" Frank.

Основная идея заключается в том, что вы включаете файл JS, а затем добавляете атрибуты в оператор INPUT.

Пример:

<input name="start-date" type="text" 
    display-name="Start Date" date="MM/YYYY" required="@getRequired()" />

Поле будет подтверждено как дата в стиле ММ / ГГГГ. Любое отображаемое сообщение об ошибке будет называться в поле «Дата начала». Префикс "@" вызовет оценку функции getRequired () во время выполнения.

Стандартные функции представлены различными способами (валюта, дата, телефон, почтовый индекс, минимальное / максимальное значение, максимальная длина и т. Д.), А также имеется фильтр нажатия клавиш; в качестве альтернативы вы можете свернуть свое собственное - проще всего просто определив регулярное выражение для поля, но вы можете добавить вызываемые функции Javascript для проверки.

Существуют псевдо-события, которые обработчики могут отлавливать до / после поля и формы.

В дополнение к атрибутам в операторе INPUT, действия проверки могут применяться к полю с помощью JS:

// Set field background when in error state
document.MyForm["INVALID-COLOR"]="yellow";

// Show error messages on field blur
document.MyForm["SUPPRESS-ONCHANGE-MESSAGE"]=true;

document.MyForm.MyField.REQUIRED = true;
document.MyForm.MyField.DisplayName="Password";

Validation.JS - 28 КБ (без сжатия)

У меня был небольшой трал, чтобы попытаться найти HTML-файл, к которому можно легко добраться с деталями, но я не могу найти один автономный, на который я могу ссылаться.

Исходный код здесь:

http://code.google.com/p/javascript-form-validation/source/browse/#svn/trunk

и DOCs находятся в файлах HTML - но вы не можете просматривать их как HTML, вы должны загрузить их, а затем просмотреть их, насколько я могу разобрать

Answer 4

Я делаю большинство новых вещей в ASP.NET с AJAX, поэтому я использую валидаторы ASP.NET с расширителями AJAX, и они отлично работают. Однако, если вы не в ASP.NET, это вам не поможет.

Большинство основных структур JavaScript (jQuery, YUI, Prototype и т. Д.) Имеют возможности проверки, так что вы можете их рассмотреть. Но в зависимости от ваших потребностей вы можете считать это излишним.

Ранее (в ASP Classic) я использовал свой собственный скрипт проверки, который был только 6 КБ; Я, очевидно, не сейчас, потому что мне нравится последовательность и полировка, предлагаемая этими структурами, но YMMV.