ساخت نمایش میزان قدرت و امنیت رمز عبور در جی کوئری jQuery

در این مطلب کد جی کوئری jQuery نمایش میزان قدرت و امنیت رمز عبور برو براتون گذاشتیم. با استفاده از این کد به راحتی میتونید سطح امنیت رمز عبوری رو برای کاربر نمایش بدید. همونطور که در پایان مشاهده می کنید فیلدی وجود داره که هر وقت کاربر رمزی رو وارد میکنه ، سطح قدرت اون رمز رو به کاربر نشون میده. جهت مشاهده به ادامه مطلب مراجعه نمایید.

جهت دانلود آموزش ساخت نمایش میزان قدرت و امنیت رمز عبور در جی کوئری jQuery به ادامه مطلب مراجعه نمایید.

کدهای HTML :

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

کدهای jQuery :

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

در خط اول به وسیله $(‘#pass’) ، اون فیلد رو انتخاب کردیم و کدهارو براش نوشتیم.

موفق باشید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.