Веб LoginCheck (регистр, числа, прочее...)

Предисловие: Сегодня решил написать небольшой скрипт, для проверки поля логина перед регистрацией, который легко подключить, анимировать и при этом он не мешает основной проверке при регистрации.
Зачем это нужно? Большинство проектов запрещают регистрацию ников полностью из капса, но смысл? Если можно просто не допускать такие ники. Но это не вся возможность скрипта.

Возможности скрипта:

1. Проверка количества чисел в логине
2. Проверка количества букв в верхнем регистре
3. Проверка количества букв в нижнем регистре
4. Ограничение по количеству чисел, букв в верхнем и нижнем регистре
5. Проверка на ник полностью составленный из чисел или капса
6. Подключение анимации
7. Отключение регистрации если логин не соответствует требованиям

Для анимации используется набор стилей Animate.css

Spoiler: JavaScript

Code:

var login = document.getElementById("register-login");  //Привязка к форме логина по ID "register-login"
var create = document.getElementById("create");         //Привязка к кнопке регистрации по ID "create"
var lit; //Переменная содержащая количество букв в нижнем регистре
var num; //Переменная содержащая количество чисел
var upl; //Переменная содержащая количество букв в верхнем регистре

function check () { //Скрипт проверки логина на содержания чисел, букв в регистрах
var arr = login.value.split("");
num = 0;
lit = 0;
upl = 0;

    for (var i = 0; i < arr.length; i++)
    {
        if (isNaN(+arr[i]))
        { if (arr[i].toUpperCase() == arr[i]) {upl = upl + 1}
         else {lit = lit + 1;}}
        else {num = num + 1;}
    };

    if (login.value.length == upl || login.value.length == num || num > 6) //Требования к логину
    {create.classList.add("animated", "hinge"); //Отключение кнопки с анимацией если не выполненно требование
    create.classList.remove("rotateInUpLeft");} //очистка класса включения
    else {create.classList.remove("hinge"); //очистка класса выключения
    create.classList.add("rotateInUpLeft")}; //Включение кнопки с анимацией если выполненно требование

};

login.addEventListener("input", check); //проверка при вводе символов в поле логина

Spoiler: PHP код для webMCRex 2.0

Code:

$lit = "";
$num = "";
$upl = "";

$Login_Array = str_split($login);
$maxi = count($Login_Array);
    for ($i = 0; $i < $maxi; $i++)
    {
        $val = $Login_Array[$i];
        if (!is_numeric($val))
        { if (strtoupper($val) == $val) {$upl += 1;}
         else {$lit += 1;}}
        else {$num += 1;}
    };
if ($maxi == $upl || $maxi == $num || $num > 6 || $lit < 3)
    $rcodes[] = 2;

PHP код вставлять в файлик register.php в корне сайта между строк

Code:

if ((strlen($login) < 4) or (strlen($login) > 15))
    $rcodes[] = 6; 

и

Code:

if ((strlen($pass) < 4) or (strlen($pass) > 15))
    $rcodes[] = 7; 

Данный скрипт был проверен на
webMCRex 2.0 для него ID менять не надо, и будет работать сразу после установки на сайт.
Процесс установки описан для webMCRex, но принцип подходит для любых сайтов.
Установка:

1. Качаем стили анимации
2. Устанавливаем ( кидаем файлик стилей в папку с стилями и подключаем в html)
   для webMCRex animate.css кидаем в папку /style/название_темы/css, после этого пишем в фаил /style/название_темы/index.html Строку между тегами head где строки <link <link href="<?php View::URL('css/animate.css') ?>" rel="stylesheet">
3. Разместите текст кода javascript который выше в спойлере либо между тегов <script></script> перед закрывающемся тегом </body> в файле /style/название_темы/index.html либо в отдельном новом файле вида CheckLogin.js и разместите его в папку /style/название_темы/js/ после подключите в index.html перед </body> строка <script src="<?php View::URL('js/CheckLogin.js') ?>"></script>

Настройка:
Пример проверки на строке 21 кода

Code:

    if (login.value.length == upl || login.value.length == num || num > 6)

Условия отключения кнопки регистрации:
login.value.length == upl (Если весь логин написан в верхнем регистре)
login.value.length == num (Если весь логин написан цифрами)
num > 6 (Содержит более 6 цифр)
Это то что уже есть в коде. Вы можете добавить проверки к примеру:
login.value.length > 20 (Если длина логина больше заданного количества 20)
upl > 5 (Если больше чем 5 заглавных букв)
И т.д.

Также вы можете выбрать любую анимацию на сайте Animate.css и вставить ее в скрипт вместо тех что стоят там.

 

Это конечно круто, но... это - никак не помешает зарегистрировать запрещенный ник.
Проверку нужно делать в самой части авторизации/регистрации.

 

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

 

В первую очередь упор идет на невозможность зарегистрировать запрещенный ник.
А у нас в итоге:

Spoiler: Картинка

 

С подключением

 

Прошу прощения, не совсем Вас понял.

 

А почему бы не использовать подобные скрипты для визуального отображения занятости/неверности поля, а ещё одну проверку при внесении данных впихнуть просто? Так обычно и делается.

 

Обычно делается обвязка вместе с движком.

 

Обычно. Тебе нужно перелопатить все известные движки что бы так говорить. И поверь мне, в большинстве их реализовано только проверка перед внесением. Реал тайм подтягиваются шаблонами. (Ну если там нет bootstrap, для него есть подключаемый плагин с этим всем делом)

 

Довольно интересный скрипт.
Выше кто то написал, что получаем забор.
Но ведь нет.
Можно довести до ума, пропадает кнопка "Регистрация" и выводится к примеру "Ваш логин не соответствует требованиям, ознакомиться с ними можно по .... "
Скрипт очень хороший. Думаю вот приспособить для своего сайта, хоть он и не связан с Minecraft.

Большое спасибо автору.

 

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

 

Спасибо, я старался. По поводу того чтобы прикрутить вывод сообщения, это уже не заточить под все сайты. А модалки и прочее не так красиво как вывод в отдельном поле у логина. Вывод сообщений прикрепить легко, однако все сайты разные, поэтому решение как к кнопке прикрутить, так как она есть везде.
Вся ценность скрипта в проверке. Так как в инете мало толковых решений, а все гениальное просто.

Это пред проверка перед отправлением формы, это не основная проверка написанная как ранее говорили в движке. Основная проверка работает отдельно! Если есть руки и время можете впилить эту себе в основную проверку. А это лишь защита от ввода некорректных данных из-за того что игроки не читают правила о создании логина, модерацию на сервере никто не отменял, и скрипт никакой ее не заменит. Я Вам предоставил скрипт с отличной проверкой на вводные данные, можете пилить дальше как хотите. Тролить может каждый.

 

Отключаем выполнение js и спокойно регистрируемся.

 

Так отключить изначально кнопку регистрации можно. И тогда это не прокатит.

И повторюсь еще раз, Вы смотрите на данный скрипт слишком требовательно. Данный скрипт полезен, проверено в работе. А то что один, два умника напишут ник капсом воспользовавшись обходом. Дак, хуже только им. Так как пользы для них никакой, а в целом для сайта, сервера офигенная польза.

 

И убьем всех посетителей с параноей (отключенным JS)?
Годно. Хорошее решение, мне например - очень нравится.

POST запрос всё равно можно будет отправить и без кнопки.

 

По поводу JS. Вы совсем все не так поняли. Прочтите еще разок.
А по поводу запроса пост. Данный скрипт изначально представлялся как проверка а не защита. И пофиг что у вас это одно и тоже. Для защиты можете его встроить в свой php код. Если Вам нужно все готовое именно под вас, пишите сами или ищите кодеров. У вас вообще есть свой сайт? Вы сталкивались с реальными игроками? Или Вы реально думаете мой скрипт должен вас защитить от вас?

 

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

 

Пользуйтесь лучше http://fronteed.com/iCheck/
Там давно всё отлажено)

 

Не переживай, тут я так понимаю и это польют грязью. Так как методы там теже по сути.
Написан плагин на JQuery и для отключения использует CSS
"inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them"
=) ждем наплыв коментариев типа а всеравно пост отправить можно или отключить джаву.
Люди FrontEND от BackEND не отличают. А слово проверка они читают как защита.

 

Да ладно, чо ты
Человек просто свой скрипт не очень правильно преподал на публику (и зачем-то отстаивает это) - вот и такое бурление началось.
Правильнее было бы в шапке назвать что это тулза для визуализации проверки регистрации/дизайн формы/UX решение и т.д, но никак не