Этот урок расскажет Вам, как сделать очень простую модификацию, которая поможет Вашим посетителям создавать более безопасные пароли при заполнении форм.
После того, как пользователь вводит желаемый пароль, скрипт делает запрос к другому PHP файлу, который проверяет пароль на маленькие и большие буквы, символы и числа. Индикатор, который будет показывать сложность пароля, отобразится на странице без перезагрузки.
sourse
Этот урок не расскажет Вам, как сделать регистрацию пользователей на Вашем сайте, данный урок только поможет Вам сделать индикатор сложности пароля.
Для начала нам необходимо создать файл form.php:
<!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=utf-8" />
<title>Untitled Document</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>
<style type="text/css">
input {
border: 1px solid #000000;
padding: 5px;
}
#password_strength {
width: 250px;
background: #cccccc;
}
#password_bar {
font-size: 11px;
background: #7FFF00;
border: 1px solid #cccccc;
padding: 5px;
}
</style>
</head>
<body>
<input id="pass" type="password" name="password" onchange="toggle_pass('pass')" /><br /><br />
<strong>Сложность пароля</strong>:<br />
<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 '<div style="width: 25%" id="password_bar">Очень легкий</div>';
break;
case 2:
echo '<div style="width: 50%" id="password_bar">Легкий</div>';
break;
case 3:
echo '<div style="width: 75%" id="password_bar">Сложный</div>';
break;
case 4:
echo '<div style="width: 100%" id="password_bar">Очень сложный</div>';
break;
}
echo ']]></result>';
break;
default:
echo 'Error, invalid action';
break;
}
?>
После того как оба файла будут созданы и загружены на сервер с поддержкой PHP, у Вас должно получиться что-то наподобии этого:
Поэкспериментировав с CSS и HTML, можно добиться более красивого результата, но для общего развития и этого примера будет достаточно.
Спасибо за Ваше внимание!