Вчера решил разработать для своего нового дизайна собственную удобную форму регистрации, которая могла бы на лету проверять правильность заполнения полей. К сожалению, смогу поделиться лишь движком. Дизайн формы в паблике не будет, но, уверен, что свой собственный стиль оформления страницы вы разработаете без проблем
Сразу скажу, что проверка не наделена искусственным интеллектом, но всё же я постарался сделать её хоть немного разумной
Особенности:
- Быстрая проверка свободен ли логин
- Проверка полей с паролем
- Пароли теперь открыты, чтобы вы быстро смогли исправиться
- Проверка поля Имя
- Проверка поля e-mail
Установка:
На персональную страницу пользователя в самый верх:
Code
<span style="display:none;"><span id="lg">1</span></span>
Страница регистрации пользователей. Замените всё на:
Code
<html>
<head></head>
<style>
body {padding:0px;margin:0px;background:#444;}
td {color:#fff;font-family:arial;font-size:13px;font-weight:bold;}
.pb {font-size:13px;font-family:arial;}
input {font-size:12px;}
</style>
<body>
<center>
<table width="700px" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="30px"></td>
<td>
<br><br>
$BODY$
</td>
<td align="right" width="30px"></td>
</tr>
<tr>
<td align="left" width="30px" height="50px"></td>
<td height="50px"> </td>
<td align="right" width="30px" height="50px"></td>
</tr>
</table>
</center>
<script src="/js/areg.js"></script>
<div style="display:none;" id="g2g">1</div>
</body>
<center><div class="pb">$POWERED_BY$</div></center>
</html>
Форма регистрации пользователей. Замените всё на:
Code
<table border="0" cellspacing="1" cellpadding="2" width="100%" class="manTable" id="siM63">
<?if($ERROR$)?>
<tr id="siM1"><td colspan="2" align="center" class="manTdError" id="siM2">$ERROR$</td></tr><tr><td height="10" class="manTdSep" colspan="2"><br></td></tr>
<?endif?>
<?if($LOGIN_FL$)?>
<tr id="siM42">
<td class="manTd1" width="35%" id="siM43">$LOGIN_SIGN$</td><td class="manTd2" id="siM44"><input type="text" id="siF13" onmouseover="$('#aer').fadeOut(500);$('#aok').fadeOut(500);" onkeyPress="$('#aer').fadeOut(500);$('#aok').fadeOut(500);" class="manFlLogin" name="user" value="" size="20" style="width:100%" maxlength="25"></td>
<td width="70px">
<img style="vertical-align:-4px;" src="http://s58.ucoz.net/.s/img/icon/se.png" onclick="chek();" title="Проверить доступность Логина" />
<img src="http://s58.ucoz.net/.s/img/wd/3/ajaxs.gif" style="vertical-align:-5px;display:none;" id="aldr" />
<img src="http://s58.ucoz.net/.s/img/icon/ok.png" title="Логин свободен!" style="vertical-align:-5px;display:none;cursor:help;" id="aok" />
<img src="http://s58.ucoz.net/.s/img/icon/er.png" title="Логин занят или содержит запрещённые символы" style="vertical-align:-5px;display:none;cursor:help;" id="aer" />
</td>
</tr>
<tr><td height="10" class="manTdSep" colspan="2">
</td></tr><br>
<?endif?>
<?if($PASSWORD_FL$)?>
<tr id="siM45"><td class="manTd1" id="siM46">$PASSWORD_SIGN$</td><td class="manTd2" id="siM47"><input id="siF14" class="manFlPassw" name="password" size="20" style="width:100%" maxlength="15"></td>
<td width="70px">
<img src="http://s58.ucoz.net/.s/img/icon/ok.png" title="Длинна пароля допустима" style="vertical-align:-5px;display:none;cursor:help;" id="aokp" />
<img src="http://s58.ucoz.net/.s/img/icon/er.png" title="Пароль слишком короткий" style="vertical-align:-5px;display:none;cursor:help;" id="aerp" />
</td>
</tr>
<?endif?>
<?if($PASSWORD1_FL$)?>
<tr id="siM48"><td class="manTd1" id="siM49">$PASSWORD1_SIGN$</td><td class="manTd2" id="siM50"><input id="siF15" class="manFlPassw1" name="password1" size="20" style="width:100%" maxlength="15"></td>
<td width="70px">
<img src="http://s58.ucoz.net/.s/img/icon/ok.png" title="Пароли совпали" style="vertical-align:-5px;display:none;cursor:help;" id="aokp2" />
<img src="http://s58.ucoz.net/.s/img/icon/er.png" title="Пароли не совпадают" style="vertical-align:-5px;display:none;cursor:help;" id="aerp2" />
</td>
</tr><tr><td height="10" class="manTdSep" colspan="2"></td>
</tr><br>
<?else?><tr><td height="10" class="manTdSep" colspan="2"><hr class="manHr" /></td></tr>
<?endif?>
<?if($NAME_FL$)?>
<tr id="siM51"><td class="manTd1" id="siM52">$NAME_SIGN$</td><td class="manTd2" id="siM53"><input type="text" id="siF16" class="manFlaName" name="name" size="20" style="width:100%;" value="" maxlength="35"></td>
<td width="70px">
<img src="http://s58.ucoz.net/.s/img/icon/ok.png" title="Ладно, верим, что это ваше настоящее имя" style="vertical-align:-5px;display:none;cursor:help;" id="aokp3" />
<img src="http://s58.ucoz.net/.s/img/icon/er.png" title="Пожалуйста, введите своё имя" style="vertical-align:-5px;display:none;cursor:help;" id="aerp3" />
</td>
</tr><tr><td height="10" class="manTdSep" colspan="2"></td></tr>
<?endif?>
<?if($EMAIL_FL$)?>
<tr id="siM54"><td class="manTd1" id="siM55">$EMAIL_SIGN$</td><td class="manTd2" id="siM56"><input type="text" id="siF17" class="manFlaEmail" name="email" size="20" style="width:100%;" value="" maxlength="60"></td>
<td width="70px">
<img src="http://s58.ucoz.net/.s/img/icon/ok.png" title="Спасибо, вроде всё путём" style="vertical-align:-5px;display:none;cursor:help;" id="aokp4" />
<img src="http://s58.ucoz.net/.s/img/icon/er.png" title="Что то не похоже это на адрес электронки" style="vertical-align:-5px;display:none;cursor:help;" id="aerp4" />
</td>
</tr><tr><td height="10" class="manTdSep" colspan="2"><br></td></tr>
<?endif?>
<?if($GENDER_FL$)?>
<tr id="siM27"><td class="manTd1" id="siM28">$GENDER_SIGN$</td><td class="manTd2" id="siM29">$GENDER_FL$</td></tr><tr><td height="10" class="manTdSep" colspan="2"><br></td></tr>
<?endif?>
<tr id="siM27"><td class="manTd1" id="siM28">$SECURITY_CODE_SIGN$</td><td class="manTd2" id="siM29">$SECURITY_CODE_FL$</td></tr><tr><td height="10" class="manTdSep" colspan="2"><br></td></tr>
<tr id="siM64"><td class="manTdBut" colspan="2" align="center" id="siM65"><input class="manFlSbm" id="siF20" type="submit" name="sbm" value="$SUBMIT_SIGN$" /></td></tr>
</table>
<div style="display:none;" id="uss">Загрузка...</div>
Скрипт из прикреплённого архива залейте в папку js. Там же найдёте все картинки, используемые в скрипте
Отдельная благодарность сайту http://v-mus.ru за предоставление странички регистрации в качестве полигона для разработки этого скрипта
Материал подготовлен Apocalypse