VPF::Универсальная проверка формы - Форум программистов

Sardar

Дата 12.5.2005, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Бегун

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

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

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

Так случилось что мне потребовался валидатор форм, сделал за 5 минут, выкладываю smile

Код

<script type="text/javascript"> 
 //проверка форм, по возвращает [true, false]
 function checkVorname(form) {
  var el, pat;
  for(var i=0; i<form.elements.length; i++) { //пробегаемся по всем элементам формы
    el=form.elements[i];
//проверяем только текстовые поля и только если есть чего говорить юзеру в случае ошибки
    if("textarea".indexOf(el.type)<0||el.getAttribute("check_message")==null) continue;
    if((pat=el.getAttribute("check_pattern"))!=null) { //если задан рег
       pat=new RegExp(pat, "g");
       if(!pat.test(el.value)) {
            alert(el.getAttribute("check_message"));
         return false;
       } 
    } else if(/^\s*$/.test(el.value)) { //иначе просто проверка что поле не пустое
          alert(el.getAttribute("check_message"));
       return false;
    }
  }
  return true;
}
</SCRIPT>
</head>
<body>

<form action="javascript: alert('OK');" method="post" onSubmit="return checkVorname(this);">
<input type="text" />Skiped<br />
<input type="text" check_message="Please specify your name!" />Name<br />
<input type="text" check_pattern="^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$" check_message="E-Mail is incorrect!" />Email<br />
<textarea check_message="Inser your message!"></textarea><br />
<input type="submit" value="check">
</form>

Просто подключили функцию выше, а затем в элементах формы задаём аттрибуты:

check_message - если надо ругаться на юзера, то покажем сей мессадж. Если аттрибут не задан, то поле не проверяеться
check_pattern - проверка по регу, иначе просто постмотрим не пусто ли поле, пробелы игнорируються.

Как видим всё просто, а ответное действие ограничиваеться только показом алерта, что в большинстве случаев достаточно. Иначе изменяем код, идея думаю ясна smile

Надеюсь больше вопросов по простейшей валидации форм не будет.

Проблемы:

Не пытайтесь сие поднять под NN4 и другими извратами
Валидатор XHTML будет ругаться на наши особенные аттрибуты check_*, потому ваша страничка с его точки зрения станет не валидной. Вообще это бред, т.к. вы имеете право создать любые аттрибуты элементу, парсер их достанет и сделает доступными в скриптах. Так что на свой выбор

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Гость_maxon

Дата 15.7.2005, 10:12 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Подскажи, пожалуйста. Как аналогичным образом выполнить проверку выпадающих списков селект на selectedIndex==0

Aliance

Дата 15.7.2005, 14:04 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

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

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

Никак наверное. Ибо ты проверяешь не по реге а по значению. Канечно можно, но смысла нет. Заменять 2 строчки на 3.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

izOne

Дата 3.10.2005, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 22.8.2003
Где: Украина, Киев

Репутация: нет
Всего: 4

Вот аналогичная штука: http://skill.ru/artwork/12697.shtml

--------------------

Успех ждет каждого, но иногда всю жизнь.

Gold Dragon

Дата 25.11.2005, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

а как мне это

Код


<input type="submit" value="check">

заменить на это

Код


<a class='snos1' href='index.php?pages=otz&go=1'><img src="images/go.gif" alt="Отправить запрос" border="0"></a>

?

что не пытался, ссылка всё равно уходит

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Sardar

Дата 25.11.2005, 16:23 (ссылка)

(нет голосов)

Загрузка ...

Бегун

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

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

А при чём тут ссылка и форма? Так попробуй:

Код

<a class='snos1' href='javascript: void(0);' onclick='this.parentNode.submit()'><img src="images/go.gif" alt="Отправить запрос" border="0"></a>

При этом ссылка должна лежать в форме, а action формы должен содержать путь до скрипта.

--------------------

wesadex

Дата 29.11.2005, 15:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 83
Регистрация: 21.6.2005

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

Не могу понять почему форма-таки отправляется на сервер, может я уже совсем тупой стал?

Код


<head>
<script language="JavaScript">    
 //проверка форм, по возвращает [true, false]    
 function CheckForm(form) {    
  var el, pat;    
  var flag=true;
  for (var i=0; i<form.elements.length; i++) //пробегаемся по всем элементам формы    
    {
    el=form.elements[i];    
    if( el.getAttribute("check_message")!=null ) 
                               if (el.Value==null) //просто проверка что поле не пустое    
                               {
                               alert(el.getAttribute("check_message"));
                               el.SetFocus();
                               el.Select();    
                               flag=false;    
                               }    
    } // of for    
  return flag; 
} // of Fucntion;    
</script>
</head>
<body>
<form method="POST" action="sendmsg.phtml?send=1" style="color:#000080; font-weight: Bold;" onSubmit="return CheckForm(this);">
 Ваше Имя:<br>
 <input id="0" type="text" name="sender" style="width:240px;" class="content" check_message="Вы забыли указать имя!"><br>
 Ваша организация:<br>
 <input id="1" type="text" name="senderltd" style="width:240px;" class="content"><br>
 Ваш E-mail:<br>
 <input id="2" type="text" name="from" value="" style="width:240px;" class="content" check_message="Вы указали неправильный e-mail!"><br>
 Заголовок сообщения:<br>
 <input id="3" type="text" name="subject" style="width:240px;" class="content"><br>
 Текст сообщения:<br> 
 <input id="4" type="textarea" name="mes" value="" style="width:480px;height:150px;" rows="20" cols="80" class="content" check_message="Ваше сообщение пусто. Вы же не хотите отправить нам пустое сообщение?!"><br/>
 <br>
 <input type="submit" value="Отправить сообщение" class="mainoption">
 <input type="reset" value="Очистить поля" class="liteoption">
 
</form>

Ciber SLasH

Дата 29.11.2005, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 2
Всего: 67

2wesadex:
Почитай этот пост (и предыдущий): http://forum.vingrad.ru/index.php?showtopi...ndpost&p=574260

wesadex

Дата 30.11.2005, 10:35 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 83
Регистрация: 21.6.2005

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

Прочитал, но этот же метод не работает с кнопкой, а мне надо именно с ней... т.е. <input type="submit"> или <input type="button">... В случае с кнопкой форма не уходит на сервак, а IE пишет ошибку на странице... В чем она понятия не имею... написано все верно!

Ciber SLasH

Дата 30.11.2005, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 2
Всего: 67

2wesadex:
Выкладывай код, возможно в нём что-то накосячил.

o.s.a.

Дата 19.12.2005, 16:22 (ссылка)

(нет голосов)

Загрузка ...

Xo4y B MocKBy

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: нет
Всего: 15

wesadex

Код


 if (el.value=="")

--------------------

Не могу стоять, пока другие работают, пойду полежу.

Gold Dragon

Дата 30.1.2006, 12:09 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

В Опере код не работает (версия 8.5), пропускает пустое поле. Что можно поправить???

--------------------

Ciber SLasH

Дата 30.1.2006, 19:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 2
Всего: 67

Вот так будет пахать:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.20.211'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Проверка форм (GET)</title>
<script type='text/javascript'>
/** Проверка форм
@param1 Object    — ссылка на элемент FORM;
@param2 Array    — массив проверяемых элементов. Пример: ['select', 'input']
*/
function checkForm(obj, elems) {
var element, pattern;
    for (var i = 0; i < obj.elements.length; i++) {  // пробегаемся по всем элементам формы
        element = obj.elements[i];
        // Проверяем только нужные поля
        if (elems != undefined)
            if (elems.join().indexOf(element.type) < 0) continue;
        // И только если есть чего говорить юзеру в случае ошибки
        if (!element.getAttribute("check_message")) continue;

        if (pattern = element.getAttribute("check_pattern")) {  // если задан рег
            pattern = new RegExp(pattern, "g");
            if (!pattern.test(element.value)) {
                alert(element.getAttribute("check_message"));
                element.focus();
                return false;
            }
        } else if(/^\s*$/.test(element.value)) {  // иначе просто проверка что поле не пустое
            alert(element.getAttribute("check_message"));
            element.focus();
            return false;
        }
    }
return true;
}
</script>
</head>

<body>
<form method="GET" action='script.htm' onSubmit='return checkForm(this)'>
    <input type="text" name="dummy"> Не проверяется<br>
    <input type="text" name="name" check_message="Имя !!!"> Имя<br>
    <input type="text" name="e-mail" check_pattern="^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$" check_message="Мыло !!!"> e-mail<br>
    <textarea name="message" check_message="Мессага !!!"></textarea><br>
    <input type="submit" value="submit">
</form>
</html>

Gold Dragon

Дата 31.1.2006, 11:20 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

Ciber SLasH
что-то вообще не работает smile

А что поменял то?

--------------------

Ciber SLasH

Дата 31.1.2006, 20:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 2
Всего: 67

Все прекрасно работает, лучше копируй.
А поменял я все проверки типа: if((pat=el.getAttribute("check_pattern"))!=null)
На соответствующие им булевы проверки, т.к. Опера, какого-то чёрта, при пустом значении не возвращает ни null ни undefined, поэтому нужно проверять на соответствие булевому типу.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »