- Баллы
- 61
Предисловие: Сегодня решил написать небольшой скрипт, для проверки поля логина перед регистрацией, который легко подключить, анимировать и при этом он не мешает основной проверке при регистрации.
Зачем это нужно? Большинство проектов запрещают регистрацию ников полностью из капса, но смысл? Если можно просто не допускать такие ники. Но это не вся возможность скрипта.
Возможности скрипта:
PHP код вставлять в файлик register.php в корне сайта между строк
и
Данный скрипт был проверен на
webMCRex 2.0 для него ID менять не надо, и будет работать сразу после установки на сайт.
Процесс установки описан для webMCRex, но принцип подходит для любых сайтов.
Установка:
Пример проверки на строке 21 кода
Условия отключения кнопки регистрации:
login.value.length == upl (Если весь логин написан в верхнем регистре)
login.value.length == num (Если весь логин написан цифрами)
num > 6 (Содержит более 6 цифр)
Это то что уже есть в коде. Вы можете добавить проверки к примеру:
login.value.length > 20 (Если длина логина больше заданного количества 20)
upl > 5 (Если больше чем 5 заглавных букв)
И т.д.
Также вы можете выбрать любую анимацию на сайте Animate.css и вставить ее в скрипт вместо тех что стоят там.
Зачем это нужно? Большинство проектов запрещают регистрацию ников полностью из капса, но смысл? Если можно просто не допускать такие ники. Но это не вся возможность скрипта.
Возможности скрипта:
- Проверка количества чисел в логине
- Проверка количества букв в верхнем регистре
- Проверка количества букв в нижнем регистре
- Ограничение по количеству чисел, букв в верхнем и нижнем регистре
- Проверка на ник полностью составленный из чисел или капса
- Подключение анимации
- Отключение регистрации если логин не соответствует требованиям
Код:
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); //проверка при вводе символов в поле логина
Код:
$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 в корне сайта между строк
Код:
if ((strlen($login) < 4) or (strlen($login) > 15))
$rcodes[] = 6;
Код:
if ((strlen($pass) < 4) or (strlen($pass) > 15))
$rcodes[] = 7;webMCRex 2.0 для него ID менять не надо, и будет работать сразу после установки на сайт.
Процесс установки описан для webMCRex, но принцип подходит для любых сайтов.
Установка:
- Качаем стили анимации
- Устанавливаем ( кидаем файлик стилей в папку с стилями и подключаем в html)
для webMCRex animate.css кидаем в папку /style/название_темы/css, после этого пишем в фаил /style/название_темы/index.html Строку между тегами head где строки <link <link href="<?php View::URL('css/animate.css') ?>" rel="stylesheet"> - Разместите текст кода javascript который выше в спойлере либо между тегов <script></script> перед закрывающемся тегом </body> в файле /style/название_темы/index.html либо в отдельном новом файле вида CheckLogin.js и разместите его в папку /style/название_темы/js/ после подключите в index.html перед </body> строка <script src="<?php View::URL('js/CheckLogin.js') ?>"></script>
Пример проверки на строке 21 кода
Код:
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 и вставить ее в скрипт вместо тех что стоят там.
Последнее редактирование:
