Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Наши скрипты > Универсальная проверка формы


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

Так случилось что мне потребовался валидатор форм, сделал за 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 и другими извратами smile
  • Валидатор XHTML будет ругаться на наши особенные аттрибуты check_*, потому ваша страничка с его точки зрения станет не валидной. Вообще это бред, т.к. вы имеете право создать любые аттрибуты элементу, парсер их достанет и сделает доступными в скриптах. Так что на свой выбор smile

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

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

Автор: izOne 3.10.2005, 16:35
Вот аналогичная штука: http://skill.ru/artwork/12697.shtml

Автор: Gold Dragon 25.11.2005, 15:39
а как мне это
Код

<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
А при чём тут ссылка и форма? Так попробуй:

Код
<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
Не могу понять почему форма-таки отправляется на сервер, может я уже совсем тупой стал?

Код

<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
2wesadex:
Почитай этот пост (и предыдущий): http://forum.vingrad.ru/index.php?showtopic=72087&view=findpost&p=574260

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

Автор: Ciber SLasH 30.11.2005, 20:02
2wesadex:
Выкладывай код, возможно в нём что-то накосячил.

Автор: o.s.a. 19.12.2005, 16:22
wesadex
Код

 if (el.value=="") 

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

Автор: Ciber SLasH 30.1.2006, 19:56
Вот так будет пахать:
Код

<!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
Ciber SLasH
что-то вообще не работает smile А что поменял то?

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)