Валидация, динамическая проверка заполнения html форм

Валидация, динамическая проверка заполнения html форм

Aвтор:неизвестный
Дата: 28.05.2006
Просмотров: 207193
реализации(javascript: 4шт...) +добавить

В данной задаче собирается различный код по валидации и динамической проверке html-форм.

Реализации:

javascript(4) +добавить

1) Простая валидация по шаблону регулярного выражения на javascript, code #161[автор:-]

Простая валидация html формы: проверка на пустоту и правильность заполнения через шаблон регулярного выражения ссылка |режим:

<!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>

<!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>

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

Найдено на forum.vingrad.ru

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

2) ещё проще Java на javascript, code #570[аноним:PretorianetZ]

ещё проще Java ссылка |режим:

<script language=JavaScript>
		function check_form(form){
        	if(form.contact_person.value==''){
            	alert('Необходимо заполнить поле Контактное лицо!');
                form.contact_person.focus();
            	return false;
        	}else if(form.email.value==''){
            	alert('Необходимо заполнить поле Email!');
            	form.email.focus();
            	return false;
        	}else if(form.phone.value==''){
            	alert('Необходимо заполнить поле Телефон!');
            	form.phone.focus();
            	return false;
	       	}else if(form.address.value==''){
            	alert('Необходимо заполнить поле Адрес!');
            	form.address.focus();
            	return false;
    	   	}else if(form.comments.value==''){
            	alert('Необходимо заполнить поле Комментарий!');
            	form.comments.focus();
            	return false;
        	}else{
                return true;
		}
	}
</script>
 
<form action="?show=basket&act=send#title_lot" method=post onsubmit="return check_form(this);">
 
контактное лицо <font color=red>* </font>:
 
<input style="width:240px" type=text name=contact_person>

<script language=JavaScript>
		function check_form(form){
        	if(form.contact_person.value==''){
            	alert('Необходимо заполнить поле Контактное лицо!');
                form.contact_person.focus();
            	return false;
        	}else if(form.email.value==''){
            	alert('Необходимо заполнить поле Email!');
            	form.email.focus();
            	return false;
        	}else if(form.phone.value==''){
            	alert('Необходимо заполнить поле Телефон!');
            	form.phone.focus();
            	return false;
	       	}else if(form.address.value==''){
            	alert('Необходимо заполнить поле Адрес!');
            	form.address.focus();
            	return false;
    	   	}else if(form.comments.value==''){
            	alert('Необходимо заполнить поле Комментарий!');
            	form.comments.focus();
            	return false;
        	}else{
                return true;
		}
	}
</script>

<form action="?show=basket&act=send#title_lot" method=post onsubmit="return check_form(this);">

контактное лицо <font color=red>* </font>:

<input style="width:240px" type=text name=contact_person>

проверка заполнения формы - проще некуда )))

3) Версия с указанием незаполненных полей. В стиле "джин-в-бутылке" на javascript, code #606[аноним:Innuil]

Версия с указанием незаполненных полей. В стиле "джин-в-бутылке" ссылка |режим:

function CheckFields(form)
{
	var EmptyFieldsForUser	= new Array();
	var FormFields			= form.elements;
	for (var i = 0; i < FormFields.length; i++) {
		if (FormFields[i].id.indexOf('Check') > -1 && FormFields[i].value == "")
		{
			EmptyFieldsForUser.push(FormFields[i].id.substr(5));
		}
	}
	if(EmptyFieldsForUser.length==0)
	{
		return true;
	}else
	{
		var EmptyMessageContainer	= document.getElementById('EmptyMessage');
		if(EmptyMessageContainer)
		{
			EmptyMessageContainer.innerText		= 'Вы не заполнили поля: ';
			for (var i = 0; i < EmptyFieldsForUser.length; i++) {
				EmptyMessageContainer.innerText	= EmptyMessageContainer.innerText	 + EmptyFieldsForUser[i] + '; ';
			}
			EmptyMessageContainer.innerText		= EmptyMessageContainer.innerText.substr(0, EmptyMessageContainer.innerText.length -2) + '.';
		}
		return false;
	}
}
 
 
<form action="SendOrder" method="post" enctype="multipart/form-data" name="OrderFields" lang="ru" onsubmit="return CheckFields(this);">
<table>
	<tr>
    	<td colspan="3"><div id="EmptyMessage"></div></td>
    </tr> 
    <tr align="left">
        <td><input name="NameCustomer" type="text" id="CheckИмя" /></td> <td><b>Имя</b></td>   <td width="25px" rowspan="6" class="TextTopCenter"><b>Жирным выделены обязательные поля.</b></td>
 
    </tr>
    <tr align="left">
        <td><input name="SurNameCustomer" type="text" id="CheckФамилия" /></td> <td>Фамилия</td>
 
    </tr>
    <tr align="left">
        <td><input name="FatherNameCustomer" type="text" /> </td><td>Отчество</td>
    </tr>
    <tr align="left">
        <td><input name="TelephoneCustomer" type="text" /></td> <td>Контактный телефон</td>
    </tr>
    <tr align="left">
        <td>
        <input name="EmailCustomer" type="text" id="CheckE-mail" /></td><td> <b>E-mail</b></td>
    </tr>
    <tr>
        <td colspan="2">
        <b>Сообщение</b>
        <textarea name="OrderText" class="TextAreaForOrder" id="CheckСообщение"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2">
       <input name="submit" type="submit" />
        </td>
    </tr>
</table>
</form>

function CheckFields(form)
{
	var EmptyFieldsForUser	= new Array();
	var FormFields			= form.elements;
	for (var i = 0; i < FormFields.length; i++) {
		if (FormFields[i].id.indexOf('Check') > -1 && FormFields[i].value == "")
		{
			EmptyFieldsForUser.push(FormFields[i].id.substr(5));
		}
	}
	if(EmptyFieldsForUser.length==0)
	{
		return true;
	}else
	{
		var EmptyMessageContainer	= document.getElementById('EmptyMessage');
		if(EmptyMessageContainer)
		{
			EmptyMessageContainer.innerText		= 'Вы не заполнили поля: ';
			for (var i = 0; i < EmptyFieldsForUser.length; i++) {
				EmptyMessageContainer.innerText	= EmptyMessageContainer.innerText	 + EmptyFieldsForUser[i] + '; ';
			}
			EmptyMessageContainer.innerText		= EmptyMessageContainer.innerText.substr(0, EmptyMessageContainer.innerText.length -2) + '.';
		}
		return false;
	}
}


<form action="SendOrder" method="post" enctype="multipart/form-data" name="OrderFields" lang="ru" onsubmit="return CheckFields(this);">
<table>
	<tr>
    	<td colspan="3"><div id="EmptyMessage"></div></td>
    </tr> 
    <tr align="left">
        <td><input name="NameCustomer" type="text" id="CheckИмя" /></td> <td><b>Имя</b></td>   <td width="25px" rowspan="6" class="TextTopCenter"><b>Жирным выделены обязательные поля.</b></td>
        
    </tr>
    <tr align="left">
        <td><input name="SurNameCustomer" type="text" id="CheckФамилия" /></td> <td>Фамилия</td>
        
    </tr>
    <tr align="left">
        <td><input name="FatherNameCustomer" type="text" /> </td><td>Отчество</td>
    </tr>
    <tr align="left">
        <td><input name="TelephoneCustomer" type="text" /></td> <td>Контактный телефон</td>
    </tr>
    <tr align="left">
        <td>
        <input name="EmailCustomer" type="text" id="CheckE-mail" /></td><td> <b>E-mail</b></td>
    </tr>
    <tr>
        <td colspan="2">
        <b>Сообщение</b>
        <textarea name="OrderText" class="TextAreaForOrder" id="CheckСообщение"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2">
       <input name="submit" type="submit" />
        </td>
    </tr>
</table>
</form>

4) ITForms - валидация HTML-форм и расширение функциональности на javascript, code #632[аноним:Игорь Тарасов]

<< назад наверх

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Популярные задачи:

Валидация, динамическая проверка заполнения html форм

Реализации: