Расскажу как сделать очень простую модификацию, которая поможет Вашим посетителям создавать более безопасные пароли при заполнении форм.
После того, как пользователь вводит желаемый пароль, скрипт делает запрос к другому PHP файлу, который проверяет пароль на маленькие и большие буквы, символы и числа. Индикатор, который будет показывать сложность пароля, отобразится на странице без перезагрузки.
Для начала нам необходимо создать файл form.php:
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 код:
<?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, можно добиться более красивого результата, но для общего развития и этого примера будет достаточно.
Спасибо за Ваше внимание!
Источник урока: www.tutorialtoday.com