MPCHAT - CMS хостинг чатов для профессионалов
90 • Посмотреть все темы

Расширяем форму регистрации

2615

Сергей @Pegass

24.07.2012

Ниже представлен шаблон формы регистрации
Особенности:
1) проверяет введены ли обязательные поля
2) проверяет корректность обязательных полей
3) обязательный чекбокс "Я согласен с правилами"
4) кнопка добавляющая все необязательные поля(кроме настроек ника и текста, а так же без field'ов)

ЗЫ проверки осуществляются ДО отправки данных на сервер, для полного счастья допилите проверку синтаксиса ника в зависимости от ваших настроек
ЗЫЫ НУ И КОНЕЧНО Я ЖДУ ТЕХ КУСКОВ КОДА КОТОРЫХ ТУТ ЯВНО НЕ ХВАТАЕТ)))

<!DOCTYPE html>

<html>

<head>

<title>Регистрация</title>

<META http-equiv=Content-Type content="text/html; charset=windows-1251">

<link rel=STYLESHEET type=text/css href=style.css>

<script>

window.onload = function () {

	var	regform = document.getElementById("regform");

	regform.onsubmit = proverka;

}



function isMore (){//функция добавления полей формы

	var form = document.getElementById("myTable");

		if (!document.getElementById("name")){  

			for (var i=1; i<=9; i++){  // 9 - кол-во добавляемых полей

				var p = "pole"+i+"()"; 

				var t1 = i * 100;

				var t =100 + t1;

				setTimeout (p,t)

			}

			var myIn = document.getElementById("myIn");

			myIn.setAttribute("value", "  Обычная форма  " );

			myIn.removeAttribute("ONCLICK");/*удаляем атрибут ONCLICK, для того чтобы в процессе выполнения кода 

			сам код нельзя было запустить еще раз*/ 	

		}

		else

			isNormal();//если форма уже открыта, то запускаем функцию по удалению полей для расширенной формы 

}



function isNormal(){//удаление полей

	var	form = document.getElementById("myTable");

	var del = form.getElementsByTagName("TR"); 

			for (var i = 14; i < del.length; i--){ // 14 - всего полей формы после добавления

				if (i==5){ //если цикл доходит до 5 поля то он прекращается, чтобы обязательные поля не удалились 

					 break;

			  } else 

				var fun = "deleteTR"+"("+i+")";

				var t1 = i * 100;

				var t =1000 - t1;



				setTimeout (fun,t)

		}

		var myIn = document.getElementById("myIn"); 

		myIn.setAttribute("value", "Расширенная форма" );

}



function deleteTR (number){

	var form = document.getElementById("myTable");

    var del = form.getElementsByTagName("TR");

		del[number].parentNode.removeChild(del[number]);

}



function proverka (){//проверка корректности данных

	var proverkaNick = document.getElementById("prNick");

	var proverkaEmail = document.getElementById("prEmail");

	var proverkaPsw = document.getElementById("prPsw");

	var proverkaPravila = document.getElementById("prPravila");

        var proverkaCode = document.getElementById("prCode");

		if (proverkaNick.value=="" || proverkaEmail.value=="" || proverkaPsw.value=="" || proverkaCode.value==""){

			proverkaNick = (proverkaNick.value) ? "" : "Поле - логин\n"                        

			proverkaEmail = (proverkaEmail.value) ? "" : "Поле - email\n"

			proverkaPsw = (proverkaPsw.value) ? "" : "Поле - пароль\n"

			proverkaCode = (proverkaCode.value) ? "" : "Не введён код с картинки\n"

			

			alert ("Не заполнены следующие обязательные поля:\n"+proverkaNick+proverkaEmail+proverkaPsw+proverkaCode);

			return  false;

		}//proverkaNick.value.length - длина ника, у меня от 3 до 12, proverkaCode.value.length - длина капчи, если ничего не поменяется - то 4)))

		else if (proverkaNick.value.length<3 || proverkaNick.value.length>12 || proverkaCode.value.length!=4 || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(proverkaEmail.value)))

                   {

                     if(proverkaNick.value.length<3) proverkaNick = "Логин не может быть короче 3-х символов\n"; 

                     else if(proverkaNick.value.length>12) proverkaNick = "Логин не может быть длиннее 12-ти символов\n";

                     else proverkaNick="";

                     if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(proverkaEmail.value))) proverkaEmail="Введён не email\n"; else proverkaEmail="";

                     if(proverkaCode.value.length!=4) proverkaCode = "Кол-во символов на картинке не соответствует кол-ву введённых\n"; else proverkaCode="";

                     alert (proverkaNick+proverkaEmail+proverkaCode);

			return  false;

                   }

	        else if (!proverkaPravila.checked) { alert("Вы не подтвердили согласие с правилами"); return  false;}	     

                else{

		        /* отправляем данные*/

		      }

                  

}



function alignCenter (){ //выравниваем содержимое содержимое ячеек по центру

	var form = document.getElementById("myTable");

	var alCentr = form.getElementsByTagName("TR")

		for (var i = 0; i < alCentr.length; i++){

			alCentr[i].setAttribute("align", "center" );

		}

}



/*Далее идут функции по добавлению строк в нашу форму*/

function pole1 () {

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Рассылка:");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "checkbox" );

		input.setAttribute("name", "subscribe" );

		td.appendChild(input);

        var text = document.createTextNode(" - подписаться");

		td.appendChild(text);

			alignCenter();

}



function pole2 () {

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Настоящее имя:");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "text" );

		input.setAttribute("id", "name" );

		input.setAttribute("name", "name" );

		td.appendChild(input);

			alignCenter();

}

function pole3 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Пол:");	

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "RADIO" );

		input.setAttribute("name", "mw" );

		input.setAttribute("value", "0" );

		td.appendChild(input);

	var text = document.createTextNode("Мужской");

		td.appendChild(text);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "RADIO" );

		input.setAttribute("name", "mw" );

		input.setAttribute("value", "1" );

		td.appendChild(input);

	var text = document.createTextNode("Женский");

		td.appendChild(text);

			alignCenter();

}

function pole4 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("День рождения");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("select");

		input.setAttribute("name", "day" );

		td.appendChild(input);

	var option = document.createElement("option");

		option.setAttribute("value", "\\" );

		input.appendChild(option);

	var text = document.createTextNode("--");

		option.appendChild(text);

		for(i=1;i<32;i++){

			if(i<10) i0='0'+i; else i0=i;

			var option = document.createElement("option");

				option.setAttribute("value", i );

				input.appendChild(option);

			var text = document.createTextNode(i0);

				option.appendChild(text);

		}

	var text = document.createTextNode(".");

		td.appendChild(text);

	var input = document.createElement("select");

		input.setAttribute("name", "month" );

		td.appendChild(input);

	var option = document.createElement("option");

		option.setAttribute("value", "\\" );

		input.appendChild(option);

	var text = document.createTextNode("--");

		option.appendChild(text);

		for(i=1;i<13;i++){

			if(i<10) i0='0'+i; else i0=i;

			var option = document.createElement("option");

				option.setAttribute("value", i );

				input.appendChild(option);

			var text = document.createTextNode(i0);

				option.appendChild(text);

		}

	var text = document.createTextNode(".");

		td.appendChild(text);

	var input = document.createElement("select");

		input.setAttribute("name", "year" );

		td.appendChild(input);

	var option = document.createElement("option");

		option.setAttribute("value", "\\" );

		input.appendChild(option);

	var text = document.createTextNode("----");

		option.appendChild(text);

		for(i=1941;i<2000;i++){

			

			var option = document.createElement("option");

				option.setAttribute("value", i );

				input.appendChild(option);

			var text = document.createTextNode(i);

				option.appendChild(text);

		}

			alignCenter();

}

function pole5 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Страна");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "text" );

		input.setAttribute("name", "land" );

		td.appendChild(input);

			alignCenter();

}

function pole6 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Город");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "text" );

		input.setAttribute("name", "stadt" );

		td.appendChild(input);

			alignCenter();

}

function pole7 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("Сайт");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "text" );

		input.setAttribute("name", "home" );

		td.appendChild(input);

			alignCenter();

}

function pole8 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("ICQ");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("INPUT");

		input.setAttribute("type", "text" );

		input.setAttribute("name", "icq" );

		td.appendChild(input);

			alignCenter();

}



function pole9 (){

	var form = document.getElementById("myTable");

	var tr = document.createElement("TR");

		form.appendChild(tr);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var text = document.createTextNode("О себе");

		td.appendChild(text);

	var td = document.createElement("TD");

		tr.appendChild(td);

	var input = document.createElement("TEXTAREA");

		input.setAttribute("rows", "6" );

		input.setAttribute("cols", "21" );

		input.setAttribute("name", "about" );

		td.appendChild(input);

			alignCenter();

		var myIn = document.getElementById("myIn");

	myIn.setAttribute("ONCLICK","isMore()");

}

</script>

</head>

<script src=http://mpchat.com/chat/?inc=informer></script>

<body class=reg-body>

<center>

<b>Регистрация</b><br><br>



<font color=ff0000>

<script>

/* вывод ошибки при неудачной регистрации */

if(err==1) document.write('Слишком много зарегистрированных, обратитесь к админу!');

if(err==2) document.write('Вы забыли заполнить одно из обязательных полей!');

if(err==3) document.write('Ошибка синтаксиса или длинны ника.');

if(err==4) document.write('Не используйте латиницу и кирилицу одновременно!');

if(err==5) document.write('Извините, но такой участник уже зарегистрирован.');

if(err==6) document.write('Неправильно указан E-mail.');

if(err==7) document.write('Код введён неверно или устарел, попробуйте ещё раз!');

if(err==8) document.write('Указанный E-mail адрес уже используется другим пользователем.');

if(err==9) document.write('Ошибка подтверждения регистрации, обратитесь к администратору!');

</script>

</font>



<form action='' method=post  id = "regform">

	<script>if(i_aidn) document.write("<input type=hidden name=i_aidn value="+i_aidn+">");</script>

	<table id = "myTable" border="1">

		<tr align = "center">

			<td Width = 180>

				<input type="button" value="Расширенная форма" ONCLICK="isMore();" id = "myIn"/>

			</td>

			<td Width = 200>

				<input type="submit" name=done value="Зарегистрироваться" /> <!--поставьте здесь атрибут action-->

			</td>

		</tr>

		<tr align = "center">

			<td>Логин:</td>

			<td>

				<input type="text" name="nick" placeholder='Ваш_логин' id = "prNick"/>

			</td>

		</tr>

		<tr align = "center">

			<td>E-mail:</td> 

			<td>

				<input type="text" name="email" placeholder='my@email.ru' id = "prEmail" />

			</td>

		</tr>

		<tr align = "center">

			<td>Пароль:</td> 

			<td>

				<input type="password" name="pass" placeholder='Введите пароль' id = "prPsw" >

			</td>

		</tr>

		<tr align = "center">

			<td><img src=index.php?inc=code></td> 

			<td>

				<input type="text" name="code" placeholder='Введите код с картинки' id="prCode">

			</td>

		</tr>		

		<tr align = "center">

			<td>Соглашение:</td> 

			<td>

				<input name="pravila" id="prPravila" type="checkbox" > - Я подтверждаю, что<br>согласен с правилами чата

			</td>

		</tr>

	</table>

</form>



<font color=336699>

<script>

/* скрыть форму при удачной регистрации (id=regform) */

if(regok>0) document.getElementById('regform').style.display='none';



/* вывод сообщения об удачной регистрации */

if(regok==1) document.write('Регистрация завершена!');

if(regok==2) document.write('Регистрация завершена, дождитесь подтверждения регистрации админом!');

if(regok==3) document.write('Регистрация завершена, вам отправлено письмо для подтверждения регистрации!');



/* Через 3 секунды после удачной регистрации перенаправить в чат */

var timewait=3;

if(regok==1 && nick && id) {

document.write('<br>Вы будете перенаправлены в чат автоматически!');

document.write('<form id=joinform action=./ method=post target=_top style="display:inline;">');

if(i_aidn) document.write('<input type=hidden name=i_aidn value='+i_aidn+'>');

if(nick) document.write('<input type=hidden name=nick value='+nick+'>');

if(nick) document.write('<input type=hidden name=id value='+id+'>');

document.write('</form>');

window.setTimeout('document.getElementById("joinform").submit();',1000*timewait);

}

</script>

</font>



</center>

</body>

</html>

Отредактировано Pegass - 24.07.2012

474

Айк @Айк

27.07.2012

мне кажется что этот кусочек <input name="pravila" id="prPravila" type="checkbox" > - Я подтверждаю, что<br>согласен с правилами чата лучше так сделать
<input name="pravila" id="prPravila" type="checkbox" > - Я подтверждаю, что<br>согласен(а) с <a href="prav.html">правилами</a> чата

2615

Сергей @Pegass

27.07.2012

У меня в чате так и сделано, здесь специально убрал))))

2970

удалён @Foggy

27.07.2012

Вёрстку дивами в наше время делают. Да и красивее бы выглядело скрытие-раскрытие.