Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Битрикс — динамическая проверка логина и email при регистрации

При регистрации на сайте Вы вводите логин или электронную почту, и Вам тут же сообщается, занят ли он.
Так по идее должно быть! Но, к сожалению, стандартный компонент Битрикс system.auth.registration так не умееет
Если на сайте очень много пользователей зачастую короткие логины заняты, приходится по несколько раз заполнять логин, вводить заново капчу — очень неудобно.

Решение — кастомизация стандартного шаблона компонента system.auth.registration.

На сайте уже должна быть подключена библиотека jQuery — если нет, подключаем.

1. Копируем /bitrix/components/bitrix/system.auth.registration/templates/.default/ в /bitrix/templates//components/bitrix/system.auth.registration/ и редактируем файл template.php внутри папки .default. Если шаблон уже кастомизирован — находим его и так же правим template.php

в самом начале добавим подключение css и js файлов


$this->addExternalCss($this->GetFolder()."/styles.css");
$this->addExternalJS($this->GetFolder()."/scripts.js");

2. Находим текстовое поле USER_LOGIN и вставляем туда «id=gt_login» и чуть выше блока form-input добавляем ещё один пустой div класс gt-reg-login
должно получиться, что-то вроде

" />

тоже самое для почты

" />

в файл стилей styles.css стили для сообщений

.gt-reg-login, .gt-reg-mail {
    display: inline-block;
}

в файл скриптов scripts.j — обработка событий keyup для логина и change для электронной почты, AJAX вызов скрипт проверки логина и почты и вывод результата

$( document ).ready(function() {
 $( document ).ready(function() {
  $('#gt_login').keyup(function() {
    var $login = $("#gt_login").val();

    if($login.length>2) {
	$.ajax({
	    url: '/ajax/login_check.php',
	    type: 'post',
	    cache: false,
	    data: {'login': $login},
	}).done(function(data){
	    if (data === false)  {
		$(".gt-reg-login").html('занят');
		$(".gt-reg-login").css('color','red');
	    } else {
		$(".gt-reg-login").html('свободен');
		$(".gt-reg-login").css('color','green');
	    }
	}).error(function(){
	    console.log('There was an error');
	});
    } else {
	$(".gt-reg-login").html('короткий');
	$(".gt-reg-login").css('color','red');
    }
  });

  $('#gt_mail').change(function() {
    var mail = $("#gt_mail");
    var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
    
    if(mail.val().search(pattern) == 0){
	$.ajax({
	    url: '/ajax/mail_check.php',
	    type: 'post',
	    cache: false,
	    data: {'mail': mail.val()},
	}).done(function(data){
	    if (data === false)  {
		$(".gt-reg-mail").html('занят');
		$(".gt-reg-mail").css('color','red');
	    } else {
		$(".gt-reg-mail").html('свободен');
		$(".gt-reg-mail").css('color','green');
	    }
	}).error(function(){
	    console.log('There was an error');
	});

    } else {
	$(".gt-reg-mail").html("некорректный email");
	$(".gt-reg-mail").css('color','red');
    }
  });
});

далее, создадим php скрипт проверки логина /ajax/login_check.php

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
$res = true;
$login = filter_input( INPUT_POST, 'login', FILTER_SANITIZE_STRING);
$rsUser = CUser::GetByLogin($login);
if($arUser = $rsUser->Fetch()) {
    $res = false;
} else {
    $res = true;
}
header('Content-type: application/json');
echo json_encode($res);
die();

и скрипт проверки почты /ajax/login_mail.php

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
$res = true;
$mail = filter_input( INPUT_POST, 'mail', FILTER_SANITIZE_EMAIL);
$filter = Array("=EMAIL" => $mail);
$rsUser = CUser::GetList(($by="id"), ($order="desc"), $filter);
if ($arUser = $rsUser->Fetch()) {
    $res = false;
} else {
    $res = true;
}
header('Content-type: application/json');
echo json_encode($res);
die();

Share the post

Битрикс — динамическая проверка логина и email при регистрации

×

Subscribe to Gtalex – о работе в сети и не только

Get updates delivered right to your inbox!

Thank you for your subscription

×