Настройка регистрации. Проверка полей.

И так настрока дизайна регистрации и проверка полей до отправки ее серверу. ( Например как тут - http://www.ucoz.ru/main/?a=reg ). После появления специального шаблона это стало возможно.

Рабочий пример тут - http://about.ucoz.ru/index/3-0-0

Что нам нужно:

Шаблон - "Страница регистрации пользователей"
Шаблон - "Форма регистрации пользователей"
2 картинки - Галочка и Крестик
Java Script фаил с кодом
Знания!!!

Сейчас я постараюсь все максимально просто обьяснить по пунктам, Вас ни кто не вынуждает это делать, и за вас это делать тоже ни кто не собирается. Вообще это для пользователей которые знают систему, html и имеют представления о том что такое JavaScript.

Пункт 1
Скачиваем JS фаил - http://about.ucoz.ru/reg.js
Скачиваем две картинки - http://about.ucoz.ru/false.gif | http://about.ucoz.ru/true.gif // Примечание: я перепутал название у картинок, вообще надо наоборот

Пункт 2
Закачиваем себе картинки на сайт. Далее закачиваем js фаил. Теперь внимание начинающие пользователи!

В файловом менеджере открываем JS фаил, и редактируем в нем следущие строки...

Находим строку

Code
// ############################### Function №3 (Writing messages in the cell. Installing image)

Под ней строки

Code

var im = '<img border="0" src="http://about.ucoz.ru/false.gif" align="middle">';
и
var im = '<img border="0" src="http://about.ucoz.ru/true.gif" align="middle">';

Меняем адреса картинок на свои. Сохраняем.

Пункт 3
Заходим в редактирование дизайна и выбираем шаблон - "Страница регистрации пользователей"

Добавляем в HEAD тег

Code
<script type="text/javascript" src="http://about.ucoz.ru/reg.js"></script>

Адрес к JS файлу меняем на свой собственно.
Также добавляем либо там же в HEAD либо в таблицу стилей класс - .fHelp {font-size:7pt;color:#515151;}

Сохраняем шаблон.

Пункт 4
ВНИМАНИЕ!!! РЕЧЬ ИДЕТ О СТАНДАРТНОЙ ФОРМЕ РЕГИСТРАЦИИ! Если вы что-то хотели изменить, добавить новое поле или сделать какое-то поле обязательным, дерзайте но скрипт уже корректно работать не будет.

Заходим в редактирование дизайна и выбираем шаблон - "Форма регистрации пользователей"
Записываем туда такой код

Code
<table border="0" cellspacing="1" cellpadding="2" width="100%" class="manTable" id="siM63">
<?if($ERROR$)?>
<tr id="siM1"><td colspan="3" align="center" class="manTdError" id="siM2">$ERROR$</td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($LOGIN_FL$)?>
<tr id="siM42"><td class="manTd1" width="20%" id="siM43">$LOGIN_SIGN$</td>
<td class="manTd2" id="siM44" width="45%"><input onblur="ch_login();" type="text" id="siF13" class="manFlLogin" name="user" value="" size="20" style="width:100%" maxlength="25" /></td>
<td class="manTd2" id="isLogin" class="fHelp" width="35%">
<img border="0" src="http://about.ucoz.ru/true.gif" align="middle" width="16" height="16" align="middle"> </td></tr>
<tr><td class="manTd1" width="20%"> </td>
<td class="manTd2" width="80%" colspan="2">
<div class="fHelp">Логин может состоять только
из латинских или русских букв, цифр и дефиса [a-zA-Z0-9-]. Минимальная длина логина 2
символа, максимальная - 15 символов.</div></td></tr>
<tr><td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($PASSWORD_FL$)?>
<tr id="siM45"><td class="manTd1" id="siM46" width="20%">$PASSWORD_SIGN$</td>
<td class="manTd2" id="siM47" width="45%"><input onblur="ch_pass();" type="password" id="siF14" class="manFlPassw" name="password" size="20" style="width:100%" maxlength="15" /></td>
<td class="manTd2" id="isPassword" class="fHelp" width="35%">
<img border="0" src="http://about.ucoz.ru/true.gif" align="middle" width="16" height="16"></td></tr>
<?endif?>
<?if($PASSWORD1_FL$)?>
<tr id="siM48"><td class="manTd1" id="siM49" width="20%">$PASSWORD1_SIGN$</td>
<td class="manTd2" id="siM50" width="45%"><input onblur="ch_pass_conf();" type="password" id="siF15" class="manFlPassw1" name="password1" size="20" style="width:100%" maxlength="15" /></td>
<td class="manTd2" id="isPasswordConfirm" class="fHelp" width="35%">
<img border="0" src="http://about.ucoz.ru/true.gif" align="middle" width="16" height="16"></td></tr>
<tr><td class="manTd1" width="20%"> </td>
<td class="manTd2" width="80%" colspan="2"><div class="fHelp">Пароль должен быть сложным, чтобы его нельзя было подобрать (пример: "<i>kDi3p9S7</i>"). Пароль может состоять только из латинских букв, цифр, знака подчеркивания и дефиса [a-zA-Z0-9-_]. Минимальная длина пароля <b>6</b> символов, максимальная - <b>15</b> символов. <b>Регистр</b> букв учитывается системой.</div></td></tr>
<tr><td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?else?><tr><td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($GROUP_FL$)?>
<tr id="siM70"><td class="manTd1" id="siM71" width="20%">$GROUP_SIGN$</td>
<td class="manTd2" id="siM72" width="45%">$GROUP_FL$</td>
<td class="manTd2" id="siM72" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($NAME_FL$)?>
<tr id="siM51"><td class="manTd1" id="siM52" width="20%">$NAME_SIGN$</td>
<td class="manTd2" id="siM53" width="45%"><input onblur="ch_name();" type="text" id="siF16" class="manFlaName" name="name" size="20" style="width:100%;" value="" maxlength="35" /></td>
<td class="manTd2" id="isName" class="fHelp" width="35%">
<img border="0" src="http://about.ucoz.ru/true.gif" align="middle" width="16" height="16"></td></tr>
<tr><td class="manTd1" width="20%"> </td>
<td class="manTd2" width="80%" colspan="2">
<div class="fHelp">Имя может состоять только
из латинских или русских букв, цифр и дефиса [a-zA-Z0-9-]. Минимальная длина
<span lang="ru">имени</span> 2
символа, максимальная - 15 символов.</div></td></tr>
<tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($EMAIL_FL$)?>
<tr id="siM54"><td class="manTd1" id="siM55" width="20%">$EMAIL_SIGN$</td>
<td class="manTd2" id="siM56" width="45%"><input onblur="ch_mail();" type="text" id="siF17" class="manFlaEmail" name="email" size="20" style="width:100%;" value="" maxlength="60" onChange="alert('Проверьте правильность вашего Email адреса, на этот адрес будет выслано письмо с кодом подтверждения.\nЕсли не подтвердить email, то любая активность, для которой используется электронная почта, будет заблокирована для вас.');" /></td>
<td class="manTd2" id="isEmail" class="fHelp" width="35%">
<img border="0" src="http://about.ucoz.ru/true.gif" align="middle" width="16" height="16"></td></tr>
<tr><td class="manTd1" width="20%"> </td>
<td class="manTd2" width="80%" colspan="2">
<div class="fHelp">Вы должны ввести рабочий e-mail адрес, так как Вам придется
его подтвердить, чтобы иметь возможность полноценно работать
на нашем сайте.</div></td></tr>
<tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($WWW_FL$)?>
<tr id="siM3"><td class="manTd1" id="siM4" width="20%">$WWW_SIGN$</td>
<td class="manTd2" id="siM5" width="45%">$WWW_FL$</td>
<td class="manTd2" id="siM5" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($ICQ_FL$)?>
<tr id="siM6"><td class="manTd1" id="siM7" width="20%">$ICQ_SIGN$</td>
<td class="manTd2" id="siM8" width="45%">$ICQ_FL$</td>
<td class="manTd2" id="siM8" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($AOL_FL$)?>
<tr id="siM9"><td class="manTd1" id="siM10" width="20%">$AOL_SIGN$</td>
<td class="manTd2" id="siM11" width="45%">$AOL_FL$</td>
<td class="manTd2" id="siM11" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($MSN_FL$)?>
<tr id="siM12"><td class="manTd1" id="siM13" width="20%">$MSN_SIGN$</td>
<td class="manTd2" id="siM14" width="45%">$MSN_FL$</td>
<td class="manTd2" id="siM14" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($YAHOO_FL$)?>
<tr id="siM15"><td class="manTd1" id="siM16" width="20%">$YAHOO_SIGN$</td>
<td class="manTd2" id="siM17" width="45%">$YAHOO_FL$</td>
<td class="manTd2" id="siM17" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($BIRTHDAY_FL$)?>
<tr id="siM30"><td class="manTd1" id="siM31" width="20%">$BIRTHDAY_SIGN$</td>
<td class="manTd2" id="siM32" width="45%">$BIRTHDAY_FL$</td>
<td class="manTd2" id="siM32" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($GENDER_FL$)?>
<tr id="siM27"><td class="manTd1" id="siM28" width="20%">$GENDER_SIGN$</td>
<td class="manTd2" id="siM29" width="45%">$GENDER_FL$</td>
<td class="manTd2" id="siM29" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($COUNTRY_FL$)?>
<tr id="siM18"><td class="manTd1" id="siM19" width="20%">$COUNTRY_SIGN$</td>
<td class="manTd2" id="siM20" width="45%">$COUNTRY_FL$</td>
<td class="manTd2" id="siM20" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($STATE_FL$)?>
<tr id="siM21"><td class="manTd1" id="siM22" width="20%">$STATE_SIGN$</td>
<td class="manTd2" id="siM23" width="45%">$STATE_FL$</td>
<td class="manTd2" id="siM23" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($CITY_FL$)?>
<tr id="siM24"><td class="manTd1" id="siM25" width="20%">$CITY_SIGN$</td>
<td class="manTd2" id="siM26" width="45%">$CITY_FL$</td>
<td class="manTd2" id="siM26" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($AVATAR_FL$)?>
<tr id="siM36"><td class="manTd1" valign="top" id="siM37" width="20%">$AVATAR_SIGN$</td>
<td class="manTd2" id="siM38" width="45%">$AVATAR_FL$</td>
<td class="manTd2" id="siM38" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($SIGNATURE_FL$)?>
<tr id="siM33"><td class="manTd1" id="siM34" width="20%">$SIGNATURE_SIGN$</td>
<td class="manTd2" id="siM35" width="45%">$SIGNATURE_FL$</td>
<td class="manTd2" id="siM35" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($SUBSCRIPTION_FL$)?>
<tr id="siM39"><td class="manTd1" id="siM40" width="20%">$SUBSCRIPTION_SIGN$</td>
<td class="manTd2" id="siM41" width="45%">$SUBSCRIPTION_FL$</td>
<td class="manTd2" id="siM41" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($OPTIONS_FL$)?>
<tr id="siM63"><td class="manTd1" id="siM64" width="20%">$OPTIONS_SIGN$</td>
<td class="manTd2" id="siM65" width="45%">$OPTIONS_FL$</td>
<td class="manTd2" id="siM65" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<?if($SECURITY_CODE_FL$)?>
<tr id="siM60"><td class="manTd1" id="siM61" width="20%">$SECURITY_CODE_SIGN$</td>
<td class="manTd2" id="siM62" width="45%">$SECURITY_CODE_FL$</td>
<td class="manTd2" id="siM62" width="35%"> </td></tr><tr>
<td height="10" class="manTdSep" colspan="3"><hr class="manHr" /></td></tr>
<?endif?>
<tr id="siM64"><td class="manTdBut" colspan="3" align="center" id="siM65"><input onclick="if(ch_code()==true) document.forms.adduser.submit();" class="manFlSbm" id="siF20" type="button" name="sbm" value="Регистрация" disabled /></td></tr>
</table>

Напоминаю это код СТАНДАРТНОЙ формы регистрации
Сохраняем шаблон.

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

Для умных пользователей целиком код js тут

Code

// ############################### Start   
var valids = new Array(0,0,0,0,0);

// ############################### Function №1 (Check secret code)
function ch_code() {
  str = document.getElementById('siF19').value;
  if (!str) {
   alert('Не введен код безопасности!')
   return false;
  } else if (str.length != 4) {
   alert('Код безопасности введен не верно!');
   return false;
  } else {
    return true;
  }
}
// ############################### Function №2 (Check array. Install button values)
function ch_correct() {
  var b = true;
  for (i=0; i<valids.length; i++) {
   if (valids[i] == 0){
    b = false;
        document.getElementById('siF20').disabled = true;
        break;
   }
  }
  x = document.getElementById('siF20').disabled;
     if (x == true) document.getElementById('siF20').disabled = !b;
}

// ############################### Function №3 (Writing messages in the cell. Installing image)

function ch_write(img,reason,id) {
  if (img == 'imT') {
   var im = '<img border="0" src="http://about.ucoz.ru/false.gif" align="middle">';
  } else if (img == 'imF') {
   var im = '<img border="0" src="http://about.ucoz.ru/true.gif" align="middle">';
  }
  document.getElementById(id).innerHTML='<div class=\"fHelp\">'+im+' '+reason+'</div>';
}

// ############################### Function №4 (Check login)

function ch_login() {
  str = document.getElementById('siF13').value;
  if (str.length <= 0) {
    ch_write('imF','Поле обязатеельно к заполнению!','isLogin');
    valids[0]=0;
    return false;
  } else if (str.length <= 1) {
    ch_write('imF','Логин должен быть не менее 2х символов.','isLogin');
    valids[0]=0;
    return false;
  } else if (str.length > 15) {
    ch_write('imF','Логин должен быть не более 15 символов.','isLogin');
    valids[0]=0;
    return false;
  } else {
    x = /^[a-zA-Z0-9-]+$/;
    y = /^[а-яА-Я0-9-]+$/;
    if (x.test(str) == true || y.test(str) == true) {
     ch_write('imT','','isLogin');
     valids[0]=1;
    } else {
     ch_write('imF','Поле \"Логин\" заполнено не верно.','isLogin');
     valids[0]=0;
   
    }
  }
  ch_correct();
}

// ############################### Function №5 (Check password)

function ch_pass() {

  var pass = document.getElementById('siF14').value; //siF14
  var conf = document.getElementById('siF15').value; //siF15
   
  if (pass.length <= 0) {
   ch_write('imF','Поле обязательно к заполнению!','isPassword');
   valids[1] = 0;
   return false;
  } else if (pass.length <= 5) {
   ch_write('imF','Пароль не может быть кароче 6 символов.!','isPassword');
   valids[1] = 0;
   return false;
  } else if (pass.length > 15) {
   ch_write('imF','Пароль не может быть больше 15 символов.!','isPassword');
   valids[1] = 0;
   return false;
  } else {
   x = /^[a-zA-Z0-9-_]+$/;
   if (x.test(pass) == true) {
    ch_write('imT','','isPassword');
    valids[1] = 1;
   } else {
    ch_write('imF','Поле \"Пароль\" заполнено не верно!','isPassword');
    valids[1] = 0;
   }
  }
  ch_correct();
}

// ############################### Function №6 (Check confirm password)

function ch_pass_conf() {

  var pass = document.getElementById('siF14').value; //siF14
  var conf = document.getElementById('siF15').value; //siF15
   
  if (valids[1] == 0) {
   ch_write('imF','Поле \"Пароль\" заполнено не верно!','isPasswordConfirm');
   return false;
  } else {
   if (conf == pass) {
    ch_write('imT','','isPasswordConfirm');
    valids[2] = 1;
   } else {
    ch_write('imF','Пароли не совпадают!','isPasswordConfirm');
    valids[2] = 0;
   }
  }
  ch_correct();
}

// ############################### Function №7 (Check name)

function ch_name() {
  str = document.getElementById('siF16').value;
   
  if (str.length <= 0) {
   ch_write('imF','Поле обязатеельно к заполнению!','isName');
   valids[3]=0;
   return false;
  } else if (str.length <= 1) {
   ch_write('imF','Имя должно быть не менее 2х символов.','isName');
   valids[3]=0;
   return false;
  } else if (str.length > 15) {
   ch_write('imF','Имя должно быть не более 15 символов.','isName');
   valids[3]=0;
   return false;
  } else {
   x = /^[a-zA-Z0-9-]+$/;
   y = /^[а-яА-Я0-9-]+$/;
   if (x.test(str) == true || y.test(str) == true) {
    ch_write('imT','','isName');
    valids[3]=1;
   } else {
    ch_write('imF','Поле \"Полное имя\" заполнено не верно.','isName');
    valids[3]=0;
   }
  }
  ch_correct();
}

// ############################### Function №8 (Check mail)   

function ch_mail() {

  var x = /\w+@\w+\.\w{2,6}/;
  var str = document.getElementById('siF17').value; //siF17
   
  if (str.length <= 0) {
   ch_write('imF','Поле обязатеельно к заполнению!','isEmail');
   valids[4] = 0;
   return false;
  }
  if (x.test(str) == true) {
   valids[4] = 1;
   ch_write('imT','','isEmail');
  } else {
   valids[4] = 0;
   ch_write('imF','Поле \"E-mail\" заполнено не верно!','isEmail');
  }
  ch_correct();
}
// ############################### End

Вопросы

В: Зачем меняем шаблон - Форма регистрации.
О: Затем чтобы заменить специальные коды на поля. Тоесть в ручную прописываем поля. В поля добовляем атрибут onblur, который вызывает функцию проеверки конкретного поля. А также в ручную прописываем кнопку "Отправить."

В: На что обратить внимание если я хочу добавить новое поле и проверить его таким образом?
О: Во первых поле надо сначало добавить кодом юкоз, потом переписать правильно html код и заменить спец код юкоз на правильно переписанный html код. А так же в поле надо добавить способ вызова функции проверки (например onblur). Написать функцию проверки на js, она может быть разной, но лучше использовать регулярные выражения.

В: А почему в поле "Полное имя " он не хочет определятся ? (http://forum.ucoz.ru/_fr/161/s6835573.jpg)
О: Потомучто скрипт не разрешает использование пробелов, если нужен пробел то нужно дописать:
Code
x = /^[a-zA-Z0-9-\s]+$/;
y = /^[а-яА-Я0-9-\s]+$/;

В: Меня интересует такой вопрос можно ли убрать при регестрации пользователей напоминание которое виводится при вводе е мейл адреса?
О: Можно, найдите и удалите эту строчку внутри тега:

Code
onchange="alert('Проверьте правильность вашего Email адреса, на этот адрес будет выслано письмо с кодом подтверждения.\nЕсли не подтвердить email, то любая активность, для которой используется электронная почта, будет заблокирована для вас.');"

В: А как в этои скрипте подправить что бы запретить регистрацию кирилицей?
О: уберите то, что выделено красным
Quote (Piterski)
x = /^[a-zA-Z0-9-]+$/;
y = /^[а-яА-Я0-9-]+$/;
if (x.test(str) == true|| y.test(str) == true) {

Угу моя ошибка, в моем условии считается что на странице всего одна форма, а у него там две, и кнопка отправляет первую, тоесть "Опрос", а надо то регистрацию... в общем в шаблоне вида формы регистрации

Code
<input onclick="javascript:if(ch_code()==true){x=document.getElementsByTagName('form');x[0].submit(); };" class="manFlSbm" id="siF20" type="button" name="sbm" value="Регистрация" disabled />

заменить на

Code
<input onclick="if(ch_code()==true) document.forms.adduser.submit();" class="manFlSbm" id="siF20" type="button" name="sbm" value="Регистрация" disabled />

и все заработает.

P.S Для тех кто все понимает.... На сколько выражение "document.forms.adduser.submit();" броузеро зависимое я не знаю, но проверил в 3х браузерах IE7 Opera 9 и FireFox тоже последней версии, все работает. Изначально я написал такой вариант

в кнопу

Code
if(ch_code()==true) fr_sub();

а в js так

Code
function fr_sub() {
  var x = document.getElementsByTagName('form');
  for (i=0; i<x.length; i++) {
   if (x[i].name=='adduser') {   
    x[i].submit();   
   }   
  }
}

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