JavaScript - Ввод кода с картинки при регистрации
На сайтах обычно стараются избежать авторегистрации и ставят защиту в виде картинки с кодом который мы должны ввести в поле ввода. Такую мини "защиту" мы сегодня и напишем. Для начала нарисуем пару картинок размера 100Х20 (по Вашему усмотрению). Я сделал четыре картинки с белым фоном. В каждой картинке я нарисовал по четыре цифры (можете использовать любой цвет и стиль). Первые две цифры у каждой картинки я придумал - 13, 47, 68, 91 (также я назвал сами файлы). Вторые две у всех сделал одинаковые - 65. И так, у нас получилось четыре файла с именами отличающимися от кода картинки. Вы можете придумать другую схему. Теперь, чтобы проверить соответствие введённого кода коду на картинки, нам достаточно прибавить к имени файла 65, но прибавить как строку: "13"+"65"="1365".
<html>
<head>
<title>Регистрация
</title>
<script language="JavaScript">
function valid(){ // Функция вывода картинки
var v=new Array; // Объявляем массив
v[0]="13.bmp"; // Заполняем массив именами наших файлов
v[1]="47.bmp";
v[2]="68.bmp";
v[3]="91.bmp";
now=new Date();
num=(now.getSeconds())%v.length;
document.write('<img name="pic" src="'+v[num]+'"></img>');
// Ввыводим случайную картинку
}
function check(){ // Функция проверки
var sp=document.form1.pic.src.split('/'); // Получаем полное имя файла
var sp2=sp[sp.length-1].split('.');
// Получаем только имя без расширения файла
var sp3=sp2[0]+"65"; // Получаем код на картинке
if (document.form1.valid.value==sp3) {
// Сравниваем полученный код с введённым
alert('Правильно!'); // Код введён правильно
// Продолжение регистрации
} else
alert('Не правильно введён код!'); // Код введён не правильно
}
</script>
</head>
<body>
<form name="form1" action="" method="">
<script>valid();</script><br> // Выводим картинку
Введите код:
<input type="text" name="valid" maxlength="4" size="6"> // Поле ввода
<input type="button" value="Далее" onclick="check();">
</form>
</body>
</html>
Вот что получилось:
| 