Регистрация
Имя пользователя
Пароль
Подтвердите пароль
E-mail
Дата рождения
Теперь необходимо создать проверку данных, введенных пользователем. Если данные введены правильно, то форма будет отправлена, если нет, то отправка будет отменена.
Проверка введенных данных будет осуществляться с помощью JavaScript
.
Для проверки данных создадим скрипт и функцию Validate(obj)
Function Validate(obj) {
var username=obj.username.value;
var pass=obj.pass.value;
var passagain=obj.passagain.value;
var mail=obj.mail.value;
var date=obj.date.value.split("-");
var errors="";
if (username=="" || pass=="" || passagain=="" || mail=="")
{
alert("Все поля должны быть заполнены!!");
return false;
}
if (pass!=passagain)
{
errors+="Пароли не совпадают!!\n";
}
if (pass.length<6)
{
errors+="Слишком короткий пароль!!\n";
}
var reg = /^\w+@\w+\.\w{2,4}$/i;
if (!reg.test(mail))
{
errors+="Неправильный e-mail адрес!!\n";
}
if (date<1930)
{
errors+="Указана неверная дата рождения!!\n";
}
if(errors=="")
return true;
else
{
alert(errors);
return false;
}
}
А теперь все по порядку. Сначала мы получаем данные формы и сохраняем их в переменные (поле date имеет формат гггг-мм-дд, поэтому используем функцию split() , которая разделяет строку на три значения).
Следующий шаг проверки - проверка пароля, он не должен быть короче 6 символов и должен совпадать с повторно введенным. В случае неудачной проверки в переменную errors записывается текст ошибки.
Затем объявляется регулярное выражение reg , с которым сравнивается электронный адрес, при неудаче опять же записывается сообщение об ошибке.
Последняя проверка - проверка даты рождения. Чтобы пользователь не указал фиктивный год рождения, мы убеждаемся, что год не меньше 1930 (можете поменять на ваш выбор).
Теперь если в переменной errors есть хотя бы какой-то текст ошибки, то функция возвращает false и выводит ошибки. Присваиваем обработчику события отправки формы нашу функцию, в качестве аргумента указываем обрабатываемую форму.
Всем привет. Не смотря на свою 110% загруженность я стараюсь пополнять свой блог новыми полезными заготовками! Сегодня я хочу привести пример удобного плагинчика, который поможет вам реализовать проверку полей форм на стороне клиента, т.е. в с помощью javascript.
Ни для кого не секрет, что любые формы на сайте нужно проверять. Нужно проверять как на стороне сервера (must have), так и на стороне клиента. Форм много, и добавлять проверки для каждого поля ввода достаточно противное занятие. Давайте попробуем обобщить данную задачу.
А что лучше всего подходит для проверки строк? Правильно — регулярные выражения, именно их мы и будет активно применять для решения поставленных задач!
Пункт 1, как правило, решается добавлением атрибута required к тегу формы (например
Для этого добавим следующий код.
$("").each(function() {
$(this).prop("required", false).attr("data-required", "true");
}).click(function() {
$(this).removeClass("error").parent().find(".error-message").text("");
});
Примечание: Код предполагает наличие библиотеки Jquery, а так же что все инпуты имеют некий родительский контейнер (как правило так оно и бывает в реальных проектах). Пример:
Приведенный выше код автоматически удалит атрибут required у тегов и создаст вместо него атрибут data-required=»true».
Для решения второй задачи создадим следующий обработчик:
$("").keypress(function(e) {
if(e.key || .indexOf(e.keyCode) == -1) {
if(!new RegExp($(this).data("regexp-input"), "g").test(e.key)) {
e.preventDefault();
return false;
}
}
});
$("").keypress(function(e) {
if(new RegExp($(this).data("regexp-block"), "g").test(e.key)) {
e.preventDefault();
return false;
}
});
Он позволит нам фильтровать вводимые символы как по разрешенным символам, так и по запрещенным. Теперь если мы захотим разрешить вводить в поле только цифры и пробелы, то там логичней воспользоваться обработчиком разрешенных символов:
Если же мы хотим разрешить вводить все кроме символов (,), !, ?, то логичней будет воспользоваться обработчиком блокирования символов:
Для решения третей задачи, нам понадобится вспомогательная функция.
Function checkRegexp(o, e) {
var $this = $(o);
$this.removeClass("error");
$this.parent().find("span.error-message").text("");
if($this.data("regexp") && $this.data("regexp") != "") {
if($this.parent().find("span.error-message").length == 0) {
$this.parent().append("");
}
if($this.val() == "" && $this.data("required")) {
$this.addClass("error");
$this.parent().find("span.error-message").text("Обязательно к заполнению");
} else {
if(!new RegExp("^" + $this.data("regexp") + "$", "g").test($this.val())) {
$this.addClass("error");
$this.parent().find("span.error-message").text("Заполненно некорректно");
}
}
}
$this.closest("form").find("").prop("disabled", $this.closest("form").find("input.error").length != 0);
}
Данный код проверяет переданный объект «o» (это будет инпут) и в случае каких либо ошибок создает дополнительный блок span с сообщением об ошибке. Так же данная функция обрабатывает созданный в пункте 1 атрибут data-required.
Теперь необходимо повесить данную функцию на наши элементы
$("input").click(function() {
$(this).removeClass("error");
}).keyup(function(e) {
checkRegexp(this, e);
}).blur(function(e) {
checkRegexp(this, e);
});
Теперь для проверки валидность поля на желаемый шаблон достаточно добавить тегу атрибут data-regexp, например проверка поля на формат даты в виде ГГГГ-ММ-ДД:
Вот собственно и все. Всего несколько строк кода, позволяют нам полностью перенести задачу валидации формы из скриптов в html файл путем добавления нужных атрибутов для элементов ввода. Описанные выше скрипты охватывают более 50% случаев всех необходимых валидаций, а значит способны сэкономить кучу времени Вам как разработчику.
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSS В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле
), :invalid (невалидное
), :required (обязательное
) и:optional (необязательное
). Их можно использовать, чтобы добавлять некоторые - хотя и весьма ограниченные - подсказки пользователям, заполняющим форму.
Используя:valid и:invalid , мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как:invalid , а необязательные - как:valid . Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний:required и:optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами:valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
Используем JavaScript JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
Устанавливая атрибуты min , max и step , мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1 , 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь - это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултип Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity , включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity -объект будет у поля, когда пользователь введёт в него 1:
Примечание переводчика
: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch , stepMismatch и typeMismatch обратная логика: true - значение не удовлетворяет атрибуту, false - удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity() .
Теперь при попытке отправить форму мы увидим вот это:
Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей. Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
Вот что происходит при клике на submit теперь:
Используем нестандартные проверки валидности Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity , мы можем просто-напросто добавить туда ещё несколько проверок.
Валидация в реальном времени Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать.
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top
