jQuery ile Şifre Kontrolü Yapmak
Bu kodu nerede kullandım bilmiyorum ama arşivimden çıktı. jQuery ile şifre kontrolü. Şifrenin güçlülüğünü kontrol eden bir Regex (Regular Expression) fonksiyonu. Şifre için gerekli en az karakter 6 olarak belirlenmiş. Orta seviye 7 ve güçlü olarak kabul edilebilecek şifre 8 karakterli olarak görünmekte. Bunu değiştirebiliyorsunuz. En güçlü şifrenin içinde özel karakter, rakam, küçük ve büyük harflerin bulunmalı. Bunlardan biri eksik olursa şifre orta güçlülükte görünüyor. Gerçi normal şifre kullanımında da güçlü olarak düşündüğüm şifrelerimde bu şekilde benim. Size de tavsiyemdir.
Geçelim koda;
Kod;
Basit olarak jquery hali aşağıda. Bunu gösterdikten sonra tüm kodu verip bir de örnek dosya ekleyeceğim yazının içine;
$('#sifre').keyup(function(e) {
//Karakter Sayısı Tanımlamaları
var guclukarakter = 8; //Güçlü saymak için gerekli sayı
var ortakarakter = 7; //Orta güçlü saymak için gerekli sayı
var gecerkarakter = 6; //En az gereki sayı
//Regex ile kontrol fonksiyonları
var strongRegex = new RegExp("^(?=.{"+guclukarakter+",})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{"+ortakarakter+",})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{"+gecerkarakter+",}).*", "g");
//Test başlasın... :)
if (false == enoughRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('azkarakter');
$('#guclu_mu').html('En az '+gecerkarakter+' karakter!');
} else if (strongRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('tamamdir');
$('#guclu_mu').html('Güçlü!');
} else if (mediumRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('idareeder');
$('#guclu_mu').html('Orta!');
} else {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('kullanmadahaiyi');
$('#guclu_mu').html('Güçsüz!');
}
return true;
});Burada görebileceğiniz üzere en az karakter, orta karakter, ve güçlü olarak sayılabilecek karakter sayıları tanım ve değiştirilebilir. Bunları aşağıda belirtiyorum. Kendi gerekliliklerinize göre değiştirebilirsiniz.guclukarakter : Şifrenin güçlü sayılabilmesi için barındırması gereken karakter sayısıortakarakter : Şifrenin orta sayılabilmesi için barındırması gereken karakter sayısıgecerkarakter : Şifrenin barındırması gereken en az karakter sayısı
Bu kodu bir dosyada kullandığımızda ortaya çıkması gereken kod bütünlüğü aşağıdaki gibidir.
jQuery ile Şifre Kontrolü
<!DOCTYPE html>
<html lang="tr">
<head>
<title>jQuery ile Şifre zorluğu kontrolü - WpAdamı</title>
<meta charset="uft-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#sifre').keyup(function(e) {
//Karakter Sayısı Tanımlamaları
var guclukarakter = 8; //Güçlü saymak için gerekli sayı
var ortakarakter = 7; //Orta güçlü saymak için gerekli sayı
var gecerkarakter = 6; //En az gereki sayı
//Regex ile kontrol fonksiyonları
var strongRegex = new RegExp("^(?=.{"+guclukarakter+",})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{"+ortakarakter+",})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{"+gecerkarakter+",}).*", "g");
//Test başlasın... :)
if (false == enoughRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('azkarakter');
$('#guclu_mu').html('En az '+gecerkarakter+' karakter!');
} else if (strongRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('tamamdir');
$('#guclu_mu').html('Güçlü!');
} else if (mediumRegex.test($(this).val())) {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('idareeder');
$('#guclu_mu').html('Orta!');
} else {
$('#guclu_mu').removeClass();
$('#guclu_mu').addClass('kullanmadahaiyi');
$('#guclu_mu').html('Güçsüz!');
}
return true;
});
});
</script>
<style>
.kullanmadahaiyi,.idareeder,.tamamdir,.azkarakter{
display:inline-block;
border:1px solid #000;
min-width:120px;
min-height:20px;
line-height:20px;
font-size:13px;
font-weight:bold;
padding-left:5px;
}
.kullanmadahaiyi{
color:#FFF;
background:#FF0000;
}
.tamamdir{
color:#FFF;
background:green;
}
.idareeder{
background: yellow;
}
.azkarakter{
color:#FFF;
background:#000;
}
</style>
</head>
<body>
<input type="password" name="sifre" id="sifre" />
<span id="guclu_mu"></span>
</body>
</html>