Уважаемые читатели сайта Ajaxs.ru

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

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Проверка занятости логина и Email

Добрый день уважаемые читатели сегодня я бы хотел поделиться с вами как с помощью jQuery сделать форму для проверки email и логина на занятость. Выглядеть это будет так: изначально у нас будет форма для ввода логина, email и пароля и заблокированная кнопка. Если ввести все данные корректно, то кнопка становится активной, если же есть ошибки, они выводятся на экран. Поверка логина и email будет осуществляться сначала регулярными выражениями, а затем при помощи ajax проверятся на занятость на стороне сервера. Весь код писался с нуля и вполне возможно что он содержит не рациональные решения и какие-то недочеты и был написан для того чтобы понять основы проверок форм без перезагрузки страницы. Все усовершенствования и возможные ошибки оставляйте в комментариях.

??????

Для начала нам понадобится создать саму форму:

<form action="#" method="post">
               
<label><font
color="red">*</font> Ваш Логин:<br></label>
<input
name="login" type="text" size="50" id="login"><span></span><br>  
<label><font
color="red">*</font> Ваш E-mail:<br></label>
<input
name="email" type="text" size="50" id="email"> <span></span><br>               
<label><font
color="red">*</font> Ваш пароль:<br></label>
<input
name="password" type="password" size="50" id="password"><span></span><br>
<small>
Не менее 6 символов</small>
<label><font
color="red">*</font> Подтвердите пароль:<br></label>
<input
name="password2" type="password" size="50" id="password2"> <span></span><br><br>
 
<input
type="submit" name="submit" value="Зарегистрироваться" id="submit" disabled><br><br>
<font
color="red">*</font> поля, обязательные для заполнения.
</form>

Теги <span></span> нам понадобятся для вывода ошибок на экран, изначально они пусты.

Не забываем подключить jQuery:

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

Также создадим парочку стилей для наших полей: inputRed – класс для поля при ошибке и inputGreen – если ошибок нет:

.inputRed{
border:1px solid #ff4040;
background: #ffcece;
}
.inputGreen{
border:1px solid #83c954;
background: #e8ffce;
}

Заготовка сделана, теперь приступим к написанию основного кода. Весь последующий код нужно писать между <script type="text/javascript"></script>

Пример проверки я покажу на логине, остальные проверки приводить не буду, поскольку они практически идентичны (полностью все проверки есть в исходных файлах к этому уроку). Чуть не забыл, сначала мы создадим несколько переменных, которые нам пригодятся:

var login, email, password, password2, loginStat, emailStat, passwordStat, password2Stat;

login, email, password, password2 – это переменные, в которых будет храниться значения полей, а loginStat, emailStat, passwordStat, password2Stat – служебные переменные, которые понадобятся для разблокировки кнопки. Все проверки у нас будут находиться в отдельной функции

$(function(){
   //весь код будет сдесь
});

Вернемся к проверке логина. Весь код будет выглядеть так

$("#login").change(function(){
login = $("#login").val(); var expLogin = /^[a-zA-Z0-9_]+$/g; var resLogin = login.search(expLogin);
if(resLogin == -1){
$("#login").next().hide().text("Неверный логин").css("color","red"). fadeIn(400); $("#login").removeClass().addClass("inputRed");
loginStat = 0;
buttonOnAndOff();
}else{
$.ajax({
url: "testingLoginEmail.php",
type: "GET", data: "login=" + login,
cache: false,
success: function(response){
if(response == "no"){
$("#login").next().hide(). text("Логин занят").css("color","red").fadeIn(400);
$("#login").removeClass(). addClass("inputRed");
}else{
$("#login").removeClass(). addClass("inputGreen");
$("#login").next().text("");
}                                            
}
});
loginStat = 1;
buttonOnAndOff();
}
});
$("#login").keyup(function(){
$("#login").removeClass();
$("#login").next().text("");
});

Что мы здесь делаем. Для начала мы получаем значение введенного логина, когда его значение изменилось (событие change). Т.е. как только пользователь набрал логин в поле и переключился на другое поле, считается, что значение этого поля изменилось и именно в этот момент мы заносим в переменную login его значение. Далее с помощью регулярного выражения мы проверяем это значение с помощью search

Если значение неверно, то выводим ошибку и добавляем нашему полю стиль ошибки. Также присваиваем переменной loginStat = 0; Эта переменная отвечает за прохождение проверки, если есть ошибка, то она равна 0, если нет ошибок, то 1. Далее мы обращаемся к какой-то непонятной функции

buttonOnAndOff();

Давайте разберем, что же она делает и как выглядит:

function  buttonOnAndOff(){
if(emailStat == 1 && passwordStat == 1 && password2Stat == 1 && loginStat == 1){
$("#submit").removeAttr("disabled");
}else{
$("#submit").attr("disabled","disabled");
}
}

Эта функция отвечает за разблокировку и блокировку кнопки. Как только у нас все значения emailStat, passwordStat, password2Stat, loginStat будут равны 1 (не будет ошибок) мы разблокируем нашу кнопку, в противном случае кнопка заблокирована.

Если значение login прошло проверку регулярным выражением, то его нужно так же проверить на занятость, мало ли кто уже зарегистрирован с таким логином. Для этого методом $.ajax мы отправляем значение переменной в файл testingLoginEmail.php. Данные будем передавать методом GET. Теперь рассмотрим как устроен этот самый testingLoginEmail.php,

if(isset($_GET['login'])){
     $login = $_GET['login'];
     if($login == 'user'){
         echo "no";
     }else{
          echo "yes";
     }
}

для примера чтобы не создавать базу данных я просто буду сравнивать значение нашей переменной со значением user (т.е.  логин user будет считаться занятым). В результате этой проверки мы выводим соответствующее значение. Теперь мы проверяем вернувшееся значение если оно no, то выводим ошибку, если все нормально, то подсвечиваем поле зеленым цветом, удаляем текст ошибки, если он есть и назначаем loginStat = 1. Нова обращаемся buttonOnAndOff(), поскольку все остальные поля не проходили проверку кнопка остается заблокированной. Кусок кода

$("#login").keyup(function(){
     $("#login").removeClass();
     $("#login").next().text("");
});

Нужен для того чтобы, когда пользователь допустил ошибку и хочет ее исправить введя другое значение мы убираем класс ошибки, чтобы не сбить его с толку, что он вводит снова неправильно (keyup отслеживает нажатие кнопок на клавиатуре).

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

Автор: Евгений Бочкарев Урок добавлен: 03 Мая 2011 в 19:30 Просмотров: 32665

Условия копирования материалов сайта

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

Посмотреть предыдущие комментарии (29)

#30 kuseal 04-05-2013 в 09:52
А так?

<?
function db_connect(){
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db';
$connect = mysql_connect($host, $user, $pass);
if(!$connect || !mysql_select_db($db, $connect)) return false;
else return $connect;
}


db_connect();
if(isset($_GET['login'])){$login = $_GET['login'];}
$res=mysql_query("SELECT * FROM users WHERE login='".$login."'");
if(mysql_num_rows($res)!=1){echo "yes";}else{echo "no";}

?>

<form action="" method="get">
<input name="login" type="text">
<input name="send" type="submit" value="Отправить">
</form>


#31 Павел 04-05-2013 в 10:34
Работает, только теперь хочу проверить и логи и емаил. Так не работает

if(isset($_GET['email'])){$email = $_GET['email'];}
$res2=mysql_query("SELECT * FROM users WHERE email='".$email."'");
if(mysql_num_rows($res2)!=1){echo "yes";}else{echo "no";}

if(isset($_GET['login'])){$login = $_GET['login'];}
$res=mysql_query("SELECT * FROM users WHERE login='".$login."'");
if(mysql_num_rows($res)!=1){echo "yes";}else{echo "no";}


#32 Надир 13-05-2013 в 19:50
Полностью рабочий код

<?php
$db=mysql_connect("127.0.0.1","user","pass");
mysql_select_db("basename" ,$db);


if(isset($_GET['login'])){
$login = htmlspecialchars($_GET['login']);
$query = "SELECT * FROM users WHERE login='$login';";
$res=mysql_query ($query);
$alluser = mysql_fetch_array ($res);
if($login == $alluser['login'])
{
echo "no";
}
else
{
echo "yes";
}
}

if(isset($_GET['mail'])){
$mail = htmlspecialchars($_GET['mail']);
$query = "SELECT * FROM users WHERE mail='$mail';";
$res=mysql_query ($query);
$allmail = mysql_fetch_array ($res);
if($mail == $allmail['mail'])
{
echo "no";
}
else
{
echo"yes";
}
}


?>


#33 Надир 13-05-2013 в 23:20
в коде проверки занятости логина сделал кое-какие поправки

$.ajax({
url: "testingLoginEmail.php",
type: "GET",
data: "login=" + login,
cache: false,
success: function(response){
if(response == "no"){
$("#login").next().hide().
text("Логин занят").css("color","red").fadeIn(400);
$("#login").removeClass().
addClass("inputRed");
}else{
$("#login").removeClass().
addClass("inputGreen");
$("#login").next().text("");
}
}
});
loginStat = 1;
buttonOnAndOff();
}


Здесь нужно запись

loginStat = 1;
buttonOnAndOff();

поднять выше, по логически понятным причинам.
Чтобы и корректность ввода и занятость проверились, и лишь тогда выполнялся этот кусок. а получается что выполняется проверка корректности, затем запускается проверка занятости логина, но независимо от исхода мы присваиваем переменной loginStat единицу.
Правильно:

$.ajax({
url: "testingLoginEmail.php",
type: "GET",
data: "login=" + login,
cache: false,
success: function(response){
if(response == "no"){
$("#login").next().hide().
text("Логин занят").css("color","red").fadeIn(400);
$("#login").removeClass().
addClass("inputRed");
}else{
$("#login").removeClass().
addClass("inputGreen");
$("#login").next().text("");
loginStat = 1;
buttonOnAndOff();
}
}
});

}


#34 Павел 15-05-2013 в 00:55
Поменял, опять же проверяет только логин на занятость, а емаил все ставит зеленый, даже если уже такой есть
#35 Игорь 27-06-2013 в 14:18
При вставке в поля пароля идентичного набора символов из буфера обмена, они не определяются как одинаковые. Это только у меня такое?
#36 Максим 17-09-2013 в 19:44
Здраствуйте, подскажите что делать если я устанавливаю вашу проверку на сайт MVC, то есть php у меня выполняется в Controller, а представление во в View, какой тогда должна быть url: "?",
#37 Евгений 17-09-2013 в 20:53
Ну если это фреймворк, то зависит от того как настроены пути (роуты) для обработки нужного контроллера, в котором и будут выполнятся проверки.
#38 Vladimir 16-09-2014 в 11:47
this code is working!


<?php
require("config.php");
require("functions.php");



if(isset($_GET['reg_login'])){
$login = $_GET['reg_login'];
$sql = "SELECT user_id FROM users WHERE login = '$login' ";
$result = mysql_query($sql);
if ( mysql_num_rows($result) > 0 ) {
echo "no";
}else{
echo "yes";
}
}

if(isset($_GET['reg_email'])){
$email = $_GET['reg_email'];
$sql = "SELECT user_id FROM users WHERE email = '$email' ";
$result = mysql_query($sql);
if ( mysql_num_rows($result) > 0 ) {
echo "no";
}else{
echo "yes";
}
}


#39 Олег 09-10-2015 в 08:06
Помогите решить такую проблему. Кнопка становится активной только после клика в пустой области экрана (после проверки поля), а надо чтобы при клике на кнопку поле проверялось, и если всё ОК становилась активной. Иначе, получается что посетитель заполнил все поля, а отправить не может, пока в пустую область не кликнет.
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки