Проверка на сложность пароля
Категория JavaScripts (jQuery, AJAX)
Этот урок расскажет вам, как помочь вашим посетителям создавать более безопасные пароли при заполнении форм.
После того, как пользователь вводит желаемый пароль, скрипт делает запрос к другому PHP файлу, который проверяет пароль на маленькие и большие буквы, символы и числа. Индикатор, который будет показывать сложность пароля, отобразится на странице без перезагрузки, аля AJAX.
В конце урока у вас должно получится что-то на подобие этого: password-check
Итак, приступим!
Для начала нам необходимо создать файл:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Проверка на сложность пароля</title>
<script type="text/javascript">
function toggle_pass(passid) {
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
handle = document.getElementById(passid);
var url = 'ajax.php?';
if(handle.value.length > 0) {
var fullurl = url + 'do=check_password_strength&pass=' + encodeURIComponent(handle.value);
http.open("GET", fullurl, true);
http.send(null);
http.onreadystatechange = statechange_password;
}else{
document.getElementById('password_strength').innerHTML = '';
}
}
function statechange_password() {
if (http.readyState == 4) {
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('password_strength').innerHTML = html;
}
}
</script>
</head>
<body>
<input id="pass" type="password" name="password" onchange="toggle_pass('pass')" /><br /><br />
<strong>Сложность пароля:</strong>
<div id="password_strength"></div>
</body>
</html>
Теперь нам необходимо создать файл ajax.php, который будет проверять пароль на сложность и выдавать вердикт.
<?php
$do = $_GET['do'];
switch($do) {
case 'check_password_strength':
$password = $_GET['pass'];
$strength = 0;
// буквы (маленькие)
if(preg_match("/([a-z]+)/", $password)) {
$strength++;
}
// буквы (большие)
if(preg_match("/([A-Z]+)/", $password)) {
$strength++;
}
// числа
if(preg_match("/([0-9]+)/", $password)) {
$strength++;
}
// символы
if(preg_match("/(W+)/", $password)) {
$strength++;
}
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result><![CDATA[';
switch($strength) {
case 1:
echo 'Очень легкий';
break;
case 2:
echo 'Легкий';
break;
case 3:
echo 'Сложный';
break;
case 4:
echo 'Очень сложный';
break;
}
echo ']]></result>';
break;
default:
echo 'Error, invalid action';
break;
}
?>
Здесь объясню принцип работы скрипта, мы передаем из первого файла в файл ajax.php наш пароль, который записывается в переменную $password. Также создается переменная $strength cо значением 0.
Далее идет проверка на содержание маленьких букв, больших букв, цифр, символов. При каждом удовлетворении условия переменную $strength увеличвают на единицу.
Потом через функция case выводится результат проверки, при $strength=1 – очень легкий, $strength=2 – легкий, $strength – сложный, $strength – очень сложный.
Источник урока: www.tutorialtoday.com
]]>Добавить в закладки
Memori
БобрДобр
Google
Яндекс
Твиттер
del.icio.us
Мистер Вонг
МоёМесто
MyScoop
RuSpace
Сто закладок
Оставьте комментарий: