Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Валидация элементов форм, ЧаВо 
:(
    Опции темы
Aliance
  Дата 4.12.2004, 22:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Итак, выдалась минутка свободного времени, и я решил упростить многим жизнь и ответить на ЧаВо «Обычные проверки текста в форме».

Есть (грубо говоря) 2 способа собственно самой проверки на JavaScript: с использованием регульрный выражений и без. Т.к. первый компактнее, актуальнее, экономичнее, разумнее и красивее - то я опишу именно его ;)

Итак, сначало определимся какие проверки нам нужны:
  • Заполненности поля (проверка того, что поле не пустое);
  • Проверка верного адреса e-mail;
  • Проверка на численность вводимых днных (проверка того, что в поле введено положительное или отрицательное целое число);
  • Проверка на ввод опр. кол-ва символов;
  • Проверка того, что пользователь выбрал переключатель (отл. от значения по умолчанию).
Код

//    Автор: Лесных Илья
//    Валидация форм
//    Copyright 2004 Aliance ©
// поле не пустое
function isNotEmpty(elem) {
var str = elem.value;
  var re = /.+/;
  if(!str.match(re)) {
      alert("Нужно заполнить все обязательные поля.");
      setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
      return false;
  } else {
      return true;
  }
}
// Пол. или отриц. число
function isNumber(elem) {
var str = elem.value;
  var re = /^[-]?\d*\.?\d*$/;
  str = str.toString();
  if (!str.match(re)) {
      alert("Только номера.");
      setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
      return false;
  }
  return true;
}
// Длина ровно 15 символов!!!
function isLen15(elem) {
var str = elem.value;
  var re = /\b.{15}\b/;
  if (!str.match(re)) {
      alert("15 символов должно быть.");
      setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
      return false;
  } else {
      return true;
  }
}
// Проверка на корректный e-mail
function isEMailAddr(elem) {
var str = elem.value;
  var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
  if (!str.match(re)) {
      alert("Проверте адрес e-mail.");
      setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
      return false;
  } else {
      return true;
  }
}
// Чекбаттон выбран
function isChosen(select) {
  if (select.selectedIndex == 0) {
      alert("Выберете чекбаттон.");
      return false;
  } else {
      return true;
  }
}

// Радиобаттон выбран
function isValidRadio(radio) {
  var valid = false;
  for (var i = 0; i < radio.length; i++) {
      if (radio[i].checked) {
          return true;
      }
  }
  alert("Выберете радиобаттон.");
  return false;
}

function focusElement(formName, elemName) {
  var elem = document.forms[formName].elements[elemName];
  elem.focus();
  elem.select();
}


ЗЫ: что бы пользователь не обошел проверку на локальной машине я всегда делаю так:

Цитата

Вместо <input type="submit" />
Пишу <input type="button" onclick="this.form.submit();" />

...

Пока что все, будет еще время - еще черкану :-) smile

Это сообщение отредактировал(а) Aliance - 4.1.2005, 23:07
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 5.12.2004, 14:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Кстати, кому не нравиться, что валидация осуществляеться при срабатыании события onchange - можно сделать так:
- убираем все события из элементов форм (валидационные события)
- ставим в элементе form след.: onsubmit="return false;"
- ставим вместо кнопки <input type="submit" /> это: <input type="button" onclick="if (validateForm(this.form)) {this.form.submit() };" />
- делаем функцию Validate():

Код

// изменяем ее под свои имена эле-тов форм.
/*
К примеру, у меня это функция делает следующее:
 проверяет на налицие хотя бы одного символа поле name1 isNotEmpty(form.name1)
 далее то же самое с полем name2
 потом тоже самое с полем <input type="text" name="eMail" />
 потом тоже поле на корректность формата адреса e-mail
 и т.д... Соответственно вам нужно изменить порядок и название имен в функции.
 Частые ошибки тут - это некорректное соблюдение скороб { и }
*/
function validateForm(form) {
    if (isNotEmpty(form.name1)) {
        if (isNotEmpty(form.name2)) {
            if (isNotEmpty(form.eMail)) {
                if (isEMailAddr(form.eMail)) {
                    if (isChosen(form.continent)) {
                        if (isValidRadio(form.accept)) {
                            return true;
                        }
                    }
                }
            }
        }
    }
    return false;
}


Это исключит обход отключившего JS пользователя от проверки на стороне клиента :-) smile

Это сообщение отредактировал(а) Aliance - 22.5.2005, 16:49
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 4.1.2005, 23:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



А тут я расскажу как осуществить валидацию первым способом (по средствам проверок):
Код

//    Автор: Лесных Илья
//    Валидация форм
//    Copyright 2005 Aliance ©

// Пол. или отриц. число
function isNumber(elem) {
var str = elem.value;
var oneDecimal = false;
var oneChar = 0;
  // удостоверяемся, что значение не преобразовано в число
 str = str.toString();
 for (var i = 0; i < str.length; i++) {
 oneChar = str.charAt(i).charCodeAt(0);
 // первым должен быть знак +/-
 if (oneChar == 45) {
     if (i <> 0) {
     continue;
     } else {
        alert("Знак +/- может быть только первым символом строки");
        return false;
     }
  }

 // десят. точка
 if (oneChar <= 46) {
     if (!oneDecimal) {
     oneDecimal = true;
     continue;
     } else {
        alert("В числе ожет быть только 1 дес. точка");
        return false;
     }
  }

 // числа от 0 до 9
 if (oneChar < 48 || oneChar > 57) {
        alert("В поле можно вводить только числа");
        return false;
 }

  }

PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 5.1.2005, 00:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Цитата(Aliance @ 4.1.2005, 22:06)
oneChar = str.charAt(i).charCodeAt(0);

Немного перебрал smile Достаточно str.charCodeAt(i);.
Цитата(Aliance @ 4.1.2005, 22:06)
if (i <> 0) {

Это не JS smile

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 6.1.2005, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Хм...
Цитата(Sardar @ 5.1.2005, 00:32)
Достаточно str.charCodeAt(i);.

Имхо нужно так, дабы показываем что ПЕРВЫЙ символ проверяем.


Цитата(Sardar @ 5.1.2005, 00:32)
Это не JS

В учебнике, по которому я учился написано, что можно так делать... Проверь код - должен работать.

Цитата(Sardar @ 5.1.2005, 00:32)
А вообще не стоит вот так проверять

Есесно, это прошлый век; но врдур кому нужно, я же не для себя пишу )))
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 6.1.2005, 22:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Цитата(Aliance @ 6.1.2005, 21:32)
Имхо нужно так, дабы показываем что ПЕРВЫЙ символ проверяем.

Цитата(Aliance @ 4.1.2005, 22:06)
oneChar = str.charAt(i).charCodeAt(0);

Перечитай что ты сказал, затем строку кода, пока не поймёш в чём суть smile
Для справки: String.charAt - взять символ по индексу, String.charCodeAt - взять код символа по индексу.

Цитата(Aliance @ 6.1.2005, 21:32)
В учебнике, по которому я учился написано, что можно так делать... Проверь код - должен работать

Левый учебник, не верь во всё слепо, проверяй код, не ленись smile На будущее всегда запускай код который постишь, просто не пойму как можно что то написать и не проверяя запостить. Хотя к простейшему коду "на глазок" это не относится smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Guest
Дата 31.1.2005, 09:32 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Как сделать проверку на загружаемые файлы с формы, формата jpg, doc, zip,rar?
  Вверх
Sardar
Дата 31.1.2005, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Проверку подобного рода на стороне клиента делают только для самого клиента, что бы страницу зря не перезагружал smile

Проверяем просто регами по расширению:
Код
function test(inp) {
  if(inp.value!="" && !/\.(jpg|doc|zip|rar)$/i.test(inp.value)) { 
    alert("Не допустимый тип файла!");
    return;
  }
 .....
}
.............
<input type="file" onChange="test(this)">

Проверка на пустое поле для глючных браузеров, где запрещенно читать содержимое элементов input:file. Все современные браузер такой траблы не имеют, но мало ли что... smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Guest
Дата 1.2.2005, 12:22 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











При этом получается, что файл нужен обязательно, а на формат не реагирует. И пусть форма работает если нет файла, а если есть то проверка по формату.
  Вверх
Sardar
Дата 1.2.2005, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Уважаемый Guest, два момента:
во первых зарегистрируйтесь, всё же приятно общатся зная с кем smile
во вторых высказывайте свои мысли чётко, я не понял пост выше это вопрос или утверждение? Я дал только пример на регах, вставь его в свой onsubmit и будет тебе счастье smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Guest
Дата 1.2.2005, 15:33 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Хорошо на днях зарегистрируюсь!
Форму вставил, но она у меня не работает. Если файл не отправлять то ошибка, а если отправлять, то отправляется файл с любым расширением.
  Вверх
Sardar
Дата 2.2.2005, 02:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Guest мы не телепаты, нужен код, иначе ничего сказать не могу smile
Создавай новый топик, незачем этот продолжать.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 2.2.2005, 23:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Цитата(Sardar @ 31.1.2005, 21:55)
if(inp.value!="" && !/\.(jpg|doc|zip|rar)$/.test(inp.value)) {

Paint обычно сохранияет файлы в верхнем регистре, т.е. формат *.JPG не проходит по твоим регам...
М
 
Пасиб, исправил :)

PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 8.3.2005, 23:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Цитата(Guest @ 1.2.2005, 15:33)
Форму вставил, но она у меня не работает. Если файл не отправлять то ошибка, а если отправлять, то отправляется файл с любым расширение

Boolean возвращать нужно smile
PM MAIL WWW ICQ Skype   Вверх
Maxy
Дата 14.7.2005, 17:02 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











А как осуществить проверку поля select? Подсажите, пожалуйста.

Спасибо.
  Вверх
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.0978 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.