Проверка формы не перезагрущая страницу

@nepster · Регистрация: 19.09.2009

Author24 — интернет-сервис помощи студентам

Подскажите пожалуйста где можно почитать или скачать пример проверки формы без перезагрузки страницы. Как я понял это можно сделать с помощью аякс. Особенно интересует проверка формы в базе. Например имеется база с логинами и в форме пишем например Вася, если Вася есть в базе то страница не перезагружается, а рядом например пишется, что логин уже существует...

@ostgals · 11.03.2010, 21:22

Помимо замечательного модуля, здесь лежит хорошее описалово того, как работает AJAX.
Сам долгое время пользовался этой библиотекой, пока не придумали jQuery.

@nepster · 11.03.2010, 22:07 **[ТС]**

спасибо ща поклацаю,

@boong · 12.03.2010, 01:07

Посмотрите это.
Проверку через ajax логина и e-mail могу код дать где то был

.

@nepster · 12.03.2010, 15:48 **[ТС]**

Честно говоря я в ява скриптах вообще нулячий, но вот я нашел 1 формочку, но есть пару вопросов...

Ну тут все понятно

HTML5

<style type="text/css">
 
label {display:block;margin:2px;}
 
.form li {width:190px;margin:3px;padding:5px 5px 5px 30px;list-style:none;position:relative;}
*html .form li {left:-15px;}
.form li img {position:absolute;left:5px;}
.form .error {border:1px solid #A90000;padding:4px 4px 4px 29px;background-color:#F8E5E5;}
.form .success {border:1px solid #74F019;padding:4px 4px 4px 29px;background-color:#DEF8CA;}
.form .selected {border:1px solid #1AA8E1;padding:4px 4px 4px 29px;background-color:#8DD8F7;}
#login_table .pad {padding:15px;}
.form input.login {padding:2px 7px;width:auto;}
.form input {width:180px;}
 
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="val.js"></script>
 
 
 
<ul class="form">
 
     <li class="validated" id="username_li">
                  <label for="r_username">Username:</label>
                  <div id="username_img"></div>
                  <input class="validated" name="username" id="username" type="text" maxlength="20" value=""  />
                  <div id="username_msg"></div>
          </li>
 
 
          <li class="validated" id="password_li">
                  <label for="r_password">Введите пароль:</label>
                  <div id="password_img"></div>
                  <input name="password" id="password" type="password" maxlength="20"  />
                  <div id="password_msg"></div>
          </li>
 
          <li id="confirmpass_li">
                  <label for="r_confirmpass">Повторите пароль:</label>
                  <div id="confirmpass_img"></div>
                  <input name="r_confirmpass" id="confirmpass" type="password" maxlength="20" />
                  <div id="confirmpass_msg"></div>
          </li>
 
 
          <li class="validated" id="email_li">
                  <label for="email">email:</label>
                  <div id="email_img"></div>
                  <input name="email" id="email" type="text" maxlength="20"  />
                  <div id="email_msg"></div>
          </li>
    </ul>

val.js

Javascript

$.fn.copyTo = function(to) {
    var to = $(to);
    for ( var i = 1; i < arguments.length; i++ )
        to.set( arguments[i], this.get(0)[ arguments[i] ] );
    return this;
};
 
 
 
new function() {
 
 
       // $.fn.validate = validate() {};
    $.fn.validate = {
        init: function(o) {
          if(o.name == 'username') { this.username(o) };
          if(o.name == 'password') { this.password(o) };
          if(o.name == 'email') { this.email(o) };
         
        },
       
 
 
        username: function(o) {
          var username = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
           
    if (!o.value.match(username)) 
    {
              doSuccess(o);
        } 
 
 
    else 
    {doError(o,'no special characters allowed');};
 
         },
 
 
 
 
 
 
        password: function(o) {
          var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
           
    if (!o.value.match(pass)) 
    {
              doSuccess(o);
        } 
 
    else 
    {doError(o,'no special characters allowed');};
         },
 
     
 
        email: function(o) {
          var email  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
           if (o.value.match(email)) {
              doSuccess(o);
            } else {
              doError(o,'Некорректный e-mail адрес');
            };
        },
 
 
 
 
 
 
 
 
     };
 
 
 
 
 
     function doSuccess(o) {
              $('#' + o.id + '_img').html('<img src="accept.gif" border="0" style="float:left;" />');
              $('#' + o.id + '_li').removeClass("error");
              $('#' + o.id + '_msg').html("");
              $('#' + o.id + '_li').addClass("success");
     }
 
 
 
 
     function doError(o,m) {
              $('#' + o.id + '_img').html('<img src="exclamation.gif" border="0" style="float:left;" />');
              $('#' + o.id + '_li').addClass("error");
              $('#' + o.id + '_msg').html(m);
              $('#' + o.id + '_li').removeClass("success");
     }
    
 
 
 
 
 
 //private helper, validates each type after check
     function doValidate(o) {
            $('#' + o.id + '_img').html('<img src="loading.gif" border="0" style="float:left;" />');
            $.post('ajax.php', { id: o.id, value: o.value }, function(json) {
                    eval("var args = " + json);
                        if (args.success == true)
                    {
                      doSuccess(args);
                    }
                    else
                    {
                          doError(args,args.msg);
                    }
                  });
    };
 
};
 
 
 
$.fn.match = function(m) {
    $('#' + this.get(0).id + '_img').html('<img src="loading.gif" border="0" style="float:left;" />');
    if ($(this).get(0).val() == $(m.match).val()) {
          $('#' + this.get(0).id + '_img').html('<img src="accept.gif" border="0" style="float:left;" />');
          $(m.error).removeClass("error");
          $(m.error).addClass("success");
          $('#' + this.get(0).id + '_msg').html("");
        } else {
          $('#' + this.get(0).id + '_img').html('<img src="exclamation.gif" border="0" style="float:left;" />');
          $(m.error).addClass("error");
          $(m.error).removeClass("success");
          $('#' + this.get(0).id + '_msg').html("Ваши пароли не совпадают");
        };
};
 
 
 
 
$(document).ready(function()
{
 
  $("//[@class=validated]/input").blur(function() {
          $(this).validate.init(this);
  });
  
 
  $("#confirmpass").blur(function() {
          $(this).match({match: '#password', error: '#confirmpass_li'});
  });
 
 
 
  // This Used To Be HOVER, But I.E. Didnt Like It
  //$(".form li").hover(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});
  $(".form li").mouseover(function() {
          $(this).addClass("selected");
  });
  $(".form li").mouseout(function() {
          $(this).removeClass("selected");
  });
});

Вот тут 2 проблемы, 1 проблема с паролем, как поставить ограничение на кол - во символом, например пароль не может быть меньше 6.

Javascript

        password: function(o) {
          var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
           
    if (!o.value.match(pass)) 
    {
              doSuccess(o);
        } 
 
    else 
    {doError(o,'no special characters allowed');};

Я пытался всунуть else if (pass < 6) {{doError(o,'тра та та ');}}
Но видимо не так...

Ну и собственно самый главный вопрос, как обратиться в базу не перезагружая страницы и "спросить" есть ли такой юзер? Вообще реально такое реализовать?

@cooperOk · 12.03.2010, 16:08

там не pass < 6 а pass.lenght < 6 надо. А насчет второго вопроса, это возможно используя ajax

@nepster · 12.03.2010, 16:41 **[ТС]**

Javascript

 password: function(o) {
          var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
          
    if (!o.value.match(pass)) 
    {
              doSuccess(o);
        } 
 
      
    else if (pass.lenght < 6)(o,'no special characters allowed')
 
    else 
    {doError(o,'no special characters allowed');};
 
         },

else if (pass.lenght < 6)(o,'no special characters allowed') // не работает

@cooperOk · 12.03.2010, 18:01

сори, не посмотрел что pass это regexp, ты ведь строку принимаешь o, так что проверяй ее

HTML5

1	if (o.lenght < 6)

@nepster · 12.03.2010, 18:26 **[ТС]**

Javascript

        password: function(o) {
          var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
          
    if (!o.value.match(pass)) 
    {doSuccess(o);} 
 
        else 
    {doError(o,'no special characters allowed');}
 
    if(o.lenght < 6)  { doSuccess(o); } 
 
    else 
    {doError(o,'Пароль меньше 6 символов');}
 
         },

теперь сколько бы символом не ввел ошибка

@boong · 12.03.2010, 18:45

Вот проверка логина в БД используя getJSON()

Javascript

function testLogin(){
    $("#loginStatus").addClass("process_ajax");
    $.getJSON("register.php", {login: $("#login").attr("value")}, function(data){
        $("#loginStatus").removeClass();
        switch(data.result){
            case -2:
                $("#loginStatus").addClass("field_err");
                $("#loginMsg").html('Длина логина должна быть не менее 4х символов и не более 15!');
                break;
            case -1:
                $("#loginStatus").addClass("field_err");
                $("#loginMsg").html('Логин содержит недопустимые символы!');
                break;
            case 0:
                $("#loginStatus").addClass("field_err");
                $("#loginMsg").html('Пользователь с таким логином уже существует!');
                break;
            case 1:
                $("#loginStatus").addClass("field_ok");
                $("#loginMsg").html('Вы можете этот логин использовать.');
                break;
        }
    });
}

register.php

PHP

$login = trim($_REQUEST['login']);
$login = utf8_decode($login);
 
if(strlen($login) < 4 or 15 < strlen($login))
  {
     $data['result']=-2; //Длина логина должна быть не менее 4х символов и не более 15.
  }
  else{
     
     /* Проверяем логин на допустимые знаки */
     if(testPole($login) == true)
       {
     if(user_is_not_exist($login) == true)
        {
            $data['result']=0; //Пользователь с таким логином уже существует.
        }
        else{
            $data['result']=1; //Логин доступен.
        }
       }
       else{
           $data['result']=-1; //Логин содержит недопустимые символы.
       }
  } 
 
 
@header('Content-Type: text/javascript; charset=windows-1251');
echo json_encode($data);
 
function testPole($login){
 
    if (preg_match("/[^a-z,A-Z,0-9\-,\_]/",$login))
      {
          unset($login);
      }
    return $login;
}
 
function user_is_not_exist($login){
 
Тут запрос к БД.
    return $login_base;
}

Форма

HTML5

<style type="text/css" media="all">
.process_ajax{
  background-image:url('process.gif');
  width:20px;
  height:20px;
  background-repeat:no-repeat;
}
 
.field_err{
  background-image:url('failed.gif');
  background-repeat:no-repeat;
  width:16px;
  height:16px;
}
 
.field_ok{
  background-image:url('done.gif');
  background-repeat:no-repeat;
  width:16px;
  height:16px;
}
 
#loginStatus{
  float:right;
  position:absolute;
  margin-left:2px;
}
#loginMsg{
  color:#ed6002;
  font-size:11px;
}
</style>
<table width="100%" cellspacing="0" cellpadding="0"border="0">
 <tr>
 <td>Логин:</td>
 <td><input id="login" type="text" name="login" size="20" onchange="testLogin();"/><span align="left" id="loginStatus">&nbsp;</span><br /><span id="loginMsg"></span></td>
 </tr><tr></table >

@nepster · 12.03.2010, 19:18 **[ТС]**

А вашу форму нужно отправить? Или как я просто сделал и не чего не происходит при вводе логина...

@boong · 12.03.2010, 19:21

Сообщение от nepster

А вашу форму нужно отправить? Или как я просто сделал и не чего не происходит при вводе логина...

Там нужно запрос ещё сделать к БД в таблицу где хранится логин и получить ответ.

Давайте мне имя таблицы и поле где хранится логин я подправлю.

@nepster · 12.03.2010, 19:44 **[ТС]**

PHP

<?
mysql_connect ("localhost", "nep", "123456") or die ("Ошибка ");
mysql_select_db("nep") or die ("Ошибка ");
 
$login = trim($_REQUEST['login']);
$login = utf8_decode($login);
 
 
if(strlen($login) < 4 or 15 < strlen($login))
  {
     $data['result']=-2; //Длина логина должна быть не менее 4х символов и не более 15.
  }
  else{
     
         /* Проверяем логин на допустимые знаки */
         if(testPole($login) == true)
           {
         if(user_is_not_exist($login) == true)
            {
                    $data['result']=0; //Пользователь с таким логином уже существует.
                }
                else{
                        $data['result']=1; //Логин доступен.
                }
           }
           else{
                   $data['result']=-1; //Логин содержит недопустимые символы.
           }
  } 
 
 
@header('Content-Type: text/javascript; charset=windows-1251');
echo json_encode($data);
 
function testPole($login){
 
        if (preg_match("/[^a-z,A-Z,0-9\-,\_]/",$login))
          {
                  unset($login);
          }
        return $login;
}
 
function user_is_not_exist($login)
{
 
        return $login_base;
}
 
?>

Добавлено через 11 минут
У забыл,

users таблица
login ячейка

@boong · 12.03.2010, 20:55

Вот примерно так

PHP

$login = trim($_REQUEST['login']);
 
$login = utf8_decode($login);   
 
 
/* Проверяем логин на количество знаков */
 
if(strlen($login) < 4 or 15 < strlen($login))
  {
     $data['result']=-2; //Длина логина должна быть не менее 4х символов и не более 15.
  }
  else{
     
     /* Проверяем логин на допустимые знаки */
     if(testPole($login) == true)
       {
     if(user_is_not_exist($login) == true)
        {
            $data['result']=0; //Пользователь с таким логином уже существует.
        }
        else{
            $data['result']=1; //Логин доступен.
        }
       }
       else{
           $data['result']=-1; //Логин содержит недопустимые символы.
       }
  } 
 
 
@header('Content-Type: text/javascript; charset=windows-1251');
echo json_encode($data);
 
/* Функция проверки символов. */
function testPole($login){
 
    if (preg_match("/[^a-z,A-Z,0-9\-,\_]/",$login))
      {
          unset($login);
      }
    return $login;
}
 
/* Функция проверки логина в БД. */
function user_is_not_exist($login){
 
$base = mysql_connect("localhost","nep","123456");
  mysql_select_db("base_nep",$db);
 
$user_base = mysql_query ("SELECT `id` FROM `users` WHERE `login`='".mysql_real_escape_string($login)."'",$db);
$result = mysql_fetch_array($user_base);
$login_base = $result ['id'];
mysql_close($user_base);
    return $login_base;
}

@boong · 12.03.2010, 21:10

Вот как это у меня работает

@nepster · 13.03.2010, 00:10 **[ТС]**

Сделал 2 фала... У меня к сожалению не чего не вышло, 1 файл

А второй возвращает {"result":-2}

@boong · 13.03.2010, 00:17

Сообщение от nepster

Сделал 2 фала... У меня к сожалению не чего не вышло, 1 файл

Сначала проверьте правильно работает register.php сделайте запрос register.php?login=тут логин ?

@nepster · 13.03.2010, 01:43 **[ТС]**

http://sp.ru/register.php?login=test

Ловлю форму 1 страницы... Ссылка остается http://sp.ru/register.php?login=test

Добавлено через 17 секунд
это денвер кста

Добавлено через 47 секунд
кстати я не заметил кажись цсс стили не используются в таблице или нет?

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
		1
	Проверка формы не перезагрущая страницу 11.03.2010, 15:53. Показов 3706. Ответов 17 Метки нет (Все метки) Подскажите пожалуйста где можно почитать или скачать пример проверки формы без перезагрузки страницы. Как я понял это можно сделать с помощью аякс. Особенно интересует проверка формы в базе. Например имеется база с логинами и в форме пишем например Вася, если Вася есть в базе то страница не перезагружается, а рядом например пишется, что логин уже существует... 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	11.03.2010, 21:22	2
	Помимо замечательного модуля, здесь лежит хорошее описалово того, как работает AJAX. Сам долгое время пользовался этой библиотекой, пока не придумали jQuery. 1

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	11.03.2010, 22:07 [ТС]	3
	спасибо ща поклацаю, 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	12.03.2010, 01:07	4
	Посмотрите это. Проверку через ajax логина и e-mail могу код дать где то был . 1

@cooperOk 60 / 60 / 6 Регистрация: 12.11.2009 Сообщений: 169
	12.03.2010, 16:08	6
	там не pass < 6 а pass.lenght < 6 надо. А насчет второго вопроса, это возможно используя ajax 1

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	12.03.2010, 19:18 [ТС]	11
	А вашу форму нужно отправить? Или как я просто сделал и не чего не происходит при вводе логина... 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	12.03.2010, 19:21	12
	Сообщение от nepster А вашу форму нужно отправить? Или как я просто сделал и не чего не происходит при вводе логина... Там нужно запрос ещё сделать к БД в таблицу где хранится логин и получить ответ. Давайте мне имя таблицы и поле где хранится логин я подправлю. 1

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	12.03.2010, 21:10	15
	Вот как это у меня работает Миниатюры 1

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	13.03.2010, 00:10 [ТС]	16
	Сделал 2 фала... У меня к сожалению не чего не вышло, 1 файл А второй возвращает {"result":-2} Миниатюры 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	13.03.2010, 00:17	17
	Сообщение от nepster Сделал 2 фала... У меня к сожалению не чего не вышло, 1 файл Сначала проверьте правильно работает register.php сделайте запрос register.php?login=тут логин ? 0

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	13.03.2010, 01:43 [ТС]	18
	http://sp.ru/register.php?login=test Ловлю форму 1 страницы... Ссылка остается http://sp.ru/register.php?login=test Добавлено через 17 секунд это денвер кста Добавлено через 47 секунд кстати я не заметил кажись цсс стили не используются в таблице или нет? 0