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

Есть (грубо говоря) 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();" />

...

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

Это сообщение отредактировал(а) Aliance - 4.1.2005, 23:07

Кстати, кому не нравиться, что валидация осуществляеться при срабатыании события 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 пользователя от проверки на стороне клиента :-)

Это сообщение отредактировал(а) Aliance - 22.5.2005, 16:49

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

Код

//    Автор: Лесных Илья //    Валидация форм //    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;  }   }

Цитата(Aliance @ 4.1.2005, 22:06)

oneChar = str.charAt(i).charCodeAt(0);

Немного перебрал Достаточно str.charCodeAt(i);.

Цитата(Aliance @ 4.1.2005, 22:06)

if (i <> 0) {

Это не JS

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

Хм...

Цитата(Sardar @ 5.1.2005, 00:32)

Достаточно str.charCodeAt(i);.

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

Цитата(Sardar @ 5.1.2005, 00:32)

Это не JS

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

Цитата(Sardar @ 5.1.2005, 00:32)

А вообще не стоит вот так проверять

Есесно, это прошлый век; но врдур кому нужно, я же не для себя пишу )))

Цитата(Aliance @ 6.1.2005, 21:32)

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

Цитата(Aliance @ 4.1.2005, 22:06)

oneChar = str.charAt(i).charCodeAt(0);

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

Цитата(Aliance @ 6.1.2005, 21:32)

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

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

Как сделать проверку на загружаемые файлы с формы, формата jpg, doc, zip,rar?

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

Проверяем просто регами по расширению:

Код

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

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

При этом получается, что файл нужен обязательно, а на формат не реагирует. И пусть форма работает если нет файла, а если есть то проверка по формату.

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

Хорошо на днях зарегистрируюсь!
Форму вставил, но она у меня не работает. Если файл не отправлять то ошибка, а если отправлять, то отправляется файл с любым расширением.

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

Цитата(Sardar @ 31.1.2005, 21:55)

if(inp.value!="" && !/\.(jpg|doc|zip|rar)$/.test(inp.value)) {

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

М	Пасиб, исправил :)

Цитата(Guest @ 1.2.2005, 15:33)

Форму вставил, но она у меня не работает. Если файл не отправлять то ошибка, а если отправлять, то отправляется файл с любым расширение

Boolean возвращать нужно

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

Спасибо.

Код

function isChosen(select) {   if (select.selectedIndex == 0) {       alert("Выберете значение из списка.");       return false;   } else {       return true;   } }

Спасибо.

Цитата(Guest @ 31.1.2005, 10:32)

Как сделать проверку на загружаемые файлы с формы, формата jpg, doc, zip,rar?

Кстати, у input:file есть свойство accept, задающую строку, содержащую список MIME-типов (через запятую).

ИМХО: С помощью JS обезопасить свой сайт не удасться. И вообще, такие проверки делаются (Я делаю) для того, чтобы юзер не гонял траффик и не перезагружал по 100 раз страницу. Проверку средствами PHP никто не отменял ;)

Это не делается с целью обезопастить.
А в данном примере, с отключенным JS пользователь форму просто отправить не сможет.

Вот и суть проблемы НУжно чтобы мог сделать все, но причинить вреда не мог

Да, в идеале бы сделать так, чтобы при включенном JS форма проверялась на строне клиента, а если не включен JS - то форма все равно бы отправлялась, и проверялась средствами PHP

Моя реализация проверок

в поля формы добавить дополнительные атрибуты  - например, regvalue="true/false" (флаг обязательности к заполнению) и fieldtype = "email/date/latChar & etc." ("тип" поля)

сделать внешний файл с набором проверок

здесь
InputFilterRX - регэксп для onkeypress (отсеять "левые" символы)
InputCheckValueRX - регэксп для "начальной" проверки (onblur поля и сабмит формы)
addPr - "дополнительная" проверка (ели не нужна - то просто true)
err - сообщение об ошибке

Пример дополнительной проверки



по сабмиту формы - пробежать по форме, собрать "обязательные" элементы, проверить обязательные поля


Если надо - выложу пример