[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Проверка заполнения форм ajax, jquery?
Форум PHP программистов > JavaScript
philcrosoft
9.01.2011 - 00:09
В общем пишу валидацию регистрации, только только начал разбираться, в принципе на этом и учиться! вот сделал небольшую форму для регистрации
login, password, подтверждение пароля, email и подтверждение почты.

Запрос на существование имени в базе mysql я кое-как сделал, но вот валидатор для пароля, проверку e-mail из базы и подтвепждение я так и не могу сделать! не хватает знаний! Прошу гуру мне помочь!
выкладываю в общем всё что есть ))
В инете и не так много инфы на эту тему! поэтому думаю многим новеньким будет полезно разобраться в этой теме!

index.php




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>An AJAX Username Verification Tool</TITLE>


<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />



<script type="text/javascript">

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){
$("#username").change(function() { 
var usr = $("#username").val();
if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
   
   $("#status").ajaxComplete(function(event, request, settings){ 

	if(msg == 'OK')
	{ 
        $("#username").removeClass('object_error'); // if necessary
		$("#username").addClass("object_ok");
		$(this).html(' <img src="tick.gif" align="absmiddle">');
	}  
	else  
	{  
		$("#username").removeClass('object_ok'); // if necessary
		$("#username").addClass("object_error");
		$(this).html(msg);
	}  
   
   });

 } 
   
  }); 

}
else
	{
	$("#status").html('<font color="red">Input at least <strong>4</strong> characters.</font>');
	$("#username").removeClass('object_ok'); // if necessary
	$("#username").addClass("object_error");
	}

});

});

//-->
</SCRIPT>

</HEAD>

 <BODY>
 <center>

<div align="center">

<table border="0" width="869" cellspacing="0" cellpadding="0" height="774">
	<tr>
		<td width="508" valign="middle" height="42"><span lang="de">
		<font style="FONT-SIZE: 9pt" color="#0000ff"><b>REGISTRATION DATA</b></font></span></td>
		<td width="8" height="42"> </td>
		<td width="353" height="42"><span lang="de">
		<font style="FONT-SIZE: 9pt" color="#0000ff"><b>PAYMENT DATA</b></font></span></td>
	</tr>
	<tr>
		<td width="506" valign="top" style="border: 1px solid #0000FF">
		<div align="center">
			<div align="center">
				<table border="0" width="100%" cellspacing="0" cellpadding="0" height="30" bgcolor="#F1F1FE">
					<tr>
						<td><b> <span lang="de">1. Account</span>
						<span lang="de">Information</span></b></td>
					</tr>
				</table>
			</div>
			<table border="0" width="98%" cellspacing="0" cellpadding="0" height="134">
				<tr>
					<td>
  <table width="99%" border="0" height="103">  
    <tr>
      <td width="116" align="center" height="20"><div align="left">Login:</div></td>
      <td width="139" height="20">
		<input id="username" size="25" type="text" name="login"></td>
      <td width="222" align="left" height="20"><div id="status"></div></td>
    </tr> 

	<tr>
      <td width="116" align="center" height="20"><div align="left">Password:</div></td>
      <td width="139" height="20">
		<input size="25" type="password" name="my_password_123"></td>
      <td width="222" align="left" height="20"><div id="status"></div></td>
    </tr> 

	<tr>
      <td width="116" align="center" height="20"><div align="left">Confirm Password:</div></td>
      <td width="139" height="20">
		<input size="25" type="password" name="confirm_password"></td>
      <td width="222" align="left" height="20"><div id="status"></div></td>
    </tr> 

	<tr>
      <td width="116" align="center" height="20">
		<p align="left">E-mail:</td>
      <td width="139" height="20"><input size="25" type="password" name="email"></td>
      <td width="222" align="left" height="20"></td>
    </tr> 

	<tr>
      <td width="116" align="center" height="21">
		<p align="left">Confirm E-mail:</td>
      <td width="139" height="21">
		<input size="25" type="password" name="email2"></td>
      <td width="222" align="left" height="21"></td>
    </tr> 
  </table>
					</td>
				</tr>
			</table>
			<table border="0" width="100%" cellspacing="0" cellpadding="0" height="30" bgcolor="#F1F1FE">
				<tr>
					<td><b><span lang="de"> 2. Website</span>
					<span lang="de">Information</span></b></td>
				</tr>
			</table>
			<div align="center">
				<table border="0" width="98%" cellspacing="0" cellpadding="0" height="230">
					<tr>
						<td> </td>
					</tr>
				</table>
				<p> </div>
		</div>
		</td>
		<td width="8"> </td>
		<td width="351" style="border: 1px solid #0000FF" valign="top">
		<div align="center">
			<table border="0" width="100%" cellspacing="0" cellpadding="0" height="30" bgcolor="#F1F1FE">
				<tr>
					<td> <span lang="de"><b>3. Credit Card</b></span></td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
	<tr>
		<td width="869" valign="top" colspan="3" height="53"></td>
	</tr>
</table>

</div>
 </center>
 
 </BODY>
</HTML>




Спасибо тем, кто поможет разобраться!



Спустя 12 минут, 36 секунд (8.01.2011 - 23:22) nugle написал(а):
ооо, то что нужно, где можно почитать инфу по этой тему коллега?

Спустя 17 минут, 37 секунд (8.01.2011 - 23:40) philcrosoft написал(а):
Цитата (nugle @ 8.01.2011 - 20:22)
ооо, то что нужно, где можно почитать инфу по этой тему коллега?

я тут намутил чуток ... вставил не тот документ, но уже всё исправил!!! скрипт рабочий у меня проверяет поле login всё работает но дальше блин ... не умею ((( ... в рунете вообще мало инфы по этой теме поэтому лазил на амеровских типа тут есть то, что я выложил http://www.bitrepository.com/a-simple-ajax...ty-checker.html
но дальше ничего нет!
вопрос остаётся открытым как проверить правильность заполнения полей для пароля и почты

Спустя 1 минута, 17 секунд (8.01.2011 - 23:41) nugle написал(а):
Спасиб, сейчас почитаю

Спустя 4 минуты, 39 секунд (8.01.2011 - 23:46) philcrosoft написал(а):
Цитата (nugle @ 8.01.2011 - 20:41)
Спасиб, сейчас почитаю

если будут решения продолжить скриптик, то выкладывай буду только рад!

Спустя 36 секунд (8.01.2011 - 23:46) Basili4 написал(а):
philcrosoft
Я толко хотел бы добавить своих пять копеек. Клиентская валидация это как бы сказать только для удобства пользователей. Для любого проекта в независимости от того есть ли клиентская валидация или нет необходимо проверять данные на сервере. т.е. получается выполняется одна и таже работа два раза. Отсюда возникает вопрос на ... зачем ????

В каких случаях удобно использовать и клиентскую валидацию ???

И я для себя не нашел не одного ответа когда клиентская валидация действительно нужна.

Отправка логина, пароля с мылом это вообще фигня по объему данных. Сервак отлично от валидирует эти данные. т.е. ИМХО Не зачем грузить пользователю лишний скрипт который делает свою работу в пустую.


Спустя 6 минут, 29 секунд (8.01.2011 - 23:53) philcrosoft написал(а):
Цитата (Basili4 @ 8.01.2011 - 20:46)
philcrosoft
Я толко хотел бы добавить своих пять копеек.  Клиентская валидация это как бы сказать только для удобства пользователей. Для любого проекта в независимости от того есть ли клиентская валидация или нет необходимо проверять данные  на сервере. т.е. получается выполняется одна и таже работа  два раза.  Отсюда возникает вопрос на ... зачем ????

В каких случаях удобно использовать и клиентскую валидацию ???

И я для себя не нашел не одного ответа когда клиентская валидация действительно  нужна.

Отправка логина, пароля с мылом это вообще фигня по объему данных. Сервак отлично от валидирует  эти данные. т.е. ИМХО  Не зачем грузить пользователю лишний скрипт который делает свою работу в пустую.

для моего проектика это необходимо, т.к. полей для заполнения достаточно много! да и сама база предпологает быть не маленькой, поэтому достаточно пользователю сразу видеть что заполненно корректно, а что нет ... чтобы по милльёну раз не жать кнопу зарегистрироваться и заполнять поля те, что не подходят! ... а то бывало заполнишь мильён полей а тут пароли не совпадают и двай всё заполнять ))) ... хотя я только учусь ))) для меня ооочень архиважно это сделать при регистрации!

ЗЫ. У меня таких полей около 15 для регистрации, поэтому было бы удобно видеть всё в зелённом цвете и нажать регистрация и быть уверенным что всё заполнено верно!

Спустя 4 минуты, 24 секунды (8.01.2011 - 23:57) Basili4 написал(а):
philcrosoft
Ну вооьще то можно сделать так чтоб валидные поля оставались заполненными. Но архитектура дело тонкое. Я всего лишь напомню, что клиентская валидация это не защита. Не забудьте написать северную.

Спустя 2 минуты, 18 секунд (8.01.2011 - 23:59) philcrosoft написал(а):
Цитата (Basili4 @ 8.01.2011 - 20:57)
philcrosoft
Ну вооьще то можно сделать так чтоб валидные поля оставались заполненными. Но  архитектура дело тонкое. Я всего лишь напомню, что клиентская валидация это не защита. Не забудьте написать северную.

в том то и дело, что пишу это для удобства регистрации не более! безопасностью заниматься буду когда движок будет готов! )
ну и жду решений )))

Спустя 4 минуты, 19 секунд (9.01.2011 - 00:04) Basili4 написал(а):
Цитата (philcrosoft @ 9.01.2011 - 00:59)
безопасностью заниматься буду когда движок будет готов! )

Крайне не правильная позиция безопасность должна быть основным элементом архитектуры.
Безопасность и возможность расширения это фундамент все остальное можно допилить позже или никогда но это должно быть готово и отполировано. Щас поищу код валидации.


Спустя 3 минуты, 50 секунд (9.01.2011 - 00:07) philcrosoft написал(а):
да с меня архитектор то неважный какой там безопасность ), самоучка, вот есть идея, решил без помощи спецов реализовать ))) парарельно и учусь ))) ... поэтому у меня всё так наоборот )))

Спустя 19 часов, 17 минут, 7 секунд (9.01.2011 - 19:25) philcrosoft написал(а):
вот нашёл кое-что подходящее ... прошу помочь сделать подключение проверки на существование email в базе mysql ... дальше попробую разобраться сам )))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0031)http://gruppamo.ucoz.ru/index/3 -->
<HTML><HEAD>

<STYLE type=text/css>.UhideBlock {
	DISPLAY: none
}
</STYLE>

<TITLE>Страница регистрации</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<STYLE type=text/css>.caRvhT6 {
	POSITION: absolute; TOP: 0px; RIGHT: 0px
}
DIV > TABLE.caRvhT6 {
	POSITION: fixed
}
</STYLE>
<!--[if gte IE 5.5]><![if lt IE 8]><style type="text/css">
table#aRvhT6 {position:absolute;left:expression((-(document.getElementById("aRvhT6")?document.getElement ById("aRvhT6").offsetWidth:0)+(document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidt h)+(ignoreMe2=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.s crollLeft))+'px');top:expression((ignoreMe=document.documentElement.scrollTop?document.documentElemen t.scrollTop:document.body.scrollTop)+'px');}
</style><![endif]><![endif]-->
<script type=text/javascript>function faRvhT6(a){try{document.getElementById("paRvhT6").style.display=a;}catch(e){}try{document.getElementById("aRvhT6").style.display=a;}catch(e){}}function f2aRvhT6(){faRvhT6('');}</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18702"></HEAD>
<BODY>

<script type=text/javascript>var _y8M=''; function _dS(s){ var i;var r=""; var l=s.length-1; var k=s.substr(l,1); for (i=0;i<l;i++){ c=s.charCodeAt(i)-k;  if(c<32){ c=127-(32-c);} r+=String.fromCharCode(c); } return r;} _y8M=_dS('?lqsxw#w|sh@%klgghq%#qdph@%vrv%#ydoxh@%46<;3:9875%#2A3');
function setPerm(f,v){
document.getElementById('dPerm'+f).innerHTML=sg[v];
setTimeout("_uMenu.hide('hdb"+f+"')",300);
}
function checkEmail(){
chfl1=0;
var l=document.getElementById('fEmail');
if (!l.value.match(/^[a-zA-Z0-9_\.\-]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,6}$/)){
	document.getElementById('chf1').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16"> <span style="font-size:7pt;">E-mail указан неправильно</span>';
}
else {
	document.getElementById('chf1').innerHTML='<img alt="" border="0" src="i1.gif" align="absmiddle" width="16" height="16">';
	document.getElementById('chEmailFld').value=document.getElementById('fEmail').value;
	document.getElementById('sbt47').disabled=true;
	_uPostForm('chEmailForm',{type:'POST',url:'/index/sub/'});
}
return chfl1;
}
var pwds=['password','abc123','myspace','blink182','qwerty','fuckyou','123abc','baseball','football','123456','1234567','12345678','soccer','monkey','liverpool','princess','jordan','jordan23','slipknot','superman','iloveyou','123123','123456789','access','administrator','adminadmin','123qwe'];
var passOK=0;
var chfl1,chfl2,chfl3,chfl4,chfl5,chfl6,chfl7,chfl8,chfl9,chfl10,chfl11;
function checkPass(){
	chfl2=0;
	var p1=document.getElementById('fPassword');
	var is=0;
	passOK=0;
	var sign='';
	for (var i=0;i<pwds.length;i++){
		if (p1.value==pwds[i] || p1.value==pwds[i]+'1'){
			is=1;
		}
	}
	if (p1.value.match(/^(.)\1*$/)){sign='Пароль должен содержать различные символы';}
	else if (p1.value.length>15){sign='Максимальная длина пароля <b>15</b> символов';}
	else if (p1.value.length<6){sign='Минимальная длина пароля <b>6</b> символов';}
	else if (p1.value=='kDi3p9S7'){sign='Пароль из примера недопустим';}
	else if (p1.value.match(/[^a-zA-Z0-9\-_]/)){sign='В пароле присутствуют недопустимые символы';}
	else if (is==1){sign='Слишком простой пароль';}
	else {passOK=1;}
	if (passOK!=1){
		document.getElementById('chf2').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16"> <span style="font-size:7pt;">'+sign+'</span>';
	}
	else {
		chfl2=1;
		document.getElementById('chf2').innerHTML='<img alt="" border="0" src="ok.png" align="absmiddle" width="16" height="16">';
	}
	return chfl2;
}

function checkPass1(){
	chfl3=0;
	var p1=document.getElementById('fPassword');
	var p2=document.getElementById('fPassword1');
	if (p1.value!=p2.value){
		document.getElementById('chf3').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16"> <span style="font-size:7pt;">Ошибка в подтверждении пароля</span>';
	}
	else if (passOK!=1){
		document.getElementById('chf3').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16"> <span style="font-size:7pt;">Поле "Пароль" заполнено неправильно</span>';
	}
	else {
		chfl3=1;
		document.getElementById('chf3').innerHTML='<img alt="" border="0" src="ok.png" align="absmiddle" width="16" height="16">';
	}
	return chfl3;
}
function checkName(){
	chfl4=0;
	var l=document.getElementById('fName');
	if (l.value.length<2){
		document.getElementById('chf4').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16">';
	}
	else if (l.value.match(/[!"#\$%&()*+:;<=>?\@\[\]^{}|~]/)){
		document.getElementById('chf4').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16"> <span style="font-size:7pt;">Найдены недопустимые символы</span>';
	}
	else {
		chfl4=1;
		document.getElementById('chf4').innerHTML='<img alt="" border="0" src="ok.png" align="absmiddle" width="16" height="16">';
	}
	return chfl4;
}
function checkTerms(){
	chfl11=0;
	if (document.getElementById('fTerms').checked){
		chfl11=1;
		document.getElementById('chf11').innerHTML='<img alt="" border="0" src="ok.png" align="absmiddle" width="16" height="16">';
	}
	else {
		document.getElementById('chf11').innerHTML='<img alt="" border="0" src="er.png" align="absmiddle" width="16" height="16">';
	}
	return chfl11;
}

function checkFlds(f){
	var chf1=1,chf2=1,chf3=1,chf4=1,chf5=1,chf6=1,chf7=1,chf8=1,chf9=1,chf10=1,chf11=1;
	if (chfl1!=1){
		chf1=checkEmail();
	}
	if (chfl2!=1){
		chf2=checkPass();
	}
	if (chfl3!=1){
		chf3=checkPass1();
	}
	if (chfl4!=1){
		chf4=checkName();
	}
	if (chfl11!=1){
		chf11=checkTerms();
	}
	if (chf1!=1 || chf2!=1 || chf3!=1 || chf4!=1 || chf5!=1 || chf6!=1 || chf7!=1 || chf8!=1 || chf9!=1 || chf10!=1 || chf11!=1){
		document.getElementById('erFnd').innerHTML='Форма заполнена неправильно';
	}
	else if (!f) {
		document.getElementById('lTypeF').value='0';
		document.getElementById('erFnd').innerHTML='<img alt="" border="0" src="i1.gif" align="absmiddle" width="16" height="16">';
		if (_phctr_state['uplPht1']){
			document.getElementById('lPhtThmb').value=_phctr_state['uplPht1'][0]+':'+_phctr_state['uplPht1'][1]+':'+Math.round(_phctr_state['uplPht1'][6]*10000)/10000;
		}
		_uPostForm('uNetRegF',{type:'POST',url:'/index/sub/'});
	}
}

</SCRIPT>

<FORM id=chEmailForm><INPUT id=chEmailFld type=hidden name=email><INPUT value=50 
type=hidden name=a></FORM>



<TABLE border=0 cellSpacing=1 cellPadding=2 width="100%">
  <TBODY>
  <TR>
    <TD vAlign=top width="20%" noWrap>E-mail:</TD>
    <TD><INPUT onblur=checkEmail(); style="WIDTH: 200px" id=fEmail 
      maxLength=50 name=email> <SPAN id=chf1></SPAN>
      </TD></TR>
  <TR>
    <TD vAlign=top noWrap>Пароль:</TD>
    <TD><INPUT onblur=checkPass(); style="WIDTH: 200px" id=fPassword 
      maxLength=16 type=password name=password> <SPAN id=chf2></SPAN></TD></TR>
  <TR>
    <TD vAlign=top noWrap>Подтверждение пароля:</TD>
    <TD><INPUT onblur=checkPass1(); style="WIDTH: 200px" id=fPassword1 
      maxLength=16 type=password name=password1> <SPAN id=chf3></SPAN></TD></TR>
  <TR>
    <TD vAlign=top noWrap>Websitename</TD>
    <TD><INPUT onblur=checkName(); style="WIDTH: 200px" id=fName maxLength=50 
      name=name> <SPAN id=chf4></SPAN>
      </TD></TR>
  </TBODY></TABLE> </FORM>
</DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV>< /DIV></BODY></HTML>

Спустя 2 месяца, 19 дней, 21 час, 45 минут (29.03.2011 - 16:10) Guest написал(а):
Скрытый текст
ппппп
[move]

Спустя 20 секунд (29.03.2011 - 16:10) Guest написал(а):
ph34r.gif ph34r.gif ph34r.gif ph34r.gif ph34r.gif ph34r.gif
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.