بررسی قدرت رمزعبور با استفاده از jquery

بررسی قدرت رمزعبور با استفاده از jquery

بررسی قدرت رمز عبور می‌تواند در فرم‌های ثبت نام استفاده شود تا کاربر را در رابطه با قدرت رمز عبوری که انتخاب کرده است آگاه کرد و یا حتی اگر رمز عبور ضعیفی انتخاب کرده بود، از ثبت نام او جلوگیری کرد. در این نوشته می‌خواهیم قدرت رمز عبور را در چهار سطح “خیلی کوتاه”، “ضعیف”، “خوب” و “قوی” بررسی کنیم.

قبل از اینکه به سراغ کد برویم، می‌خواهیم عواملی را که در قدرت یک گذرواژه دخیل اند را بیان کنیم.

  • طول رمزعبور
  • استفاده از کاراکترهای خاص مثل (@ و $)
  • استفاده از کاراکترهای بزرگ [A-Z] و کوچک [a-z] تلفیق شده با هم
  • استفاده از اعداد

حال فرض کنید که یک تگ input برای ورود رمزعبور انتخابی کاربر داریم.

<label for="password"><b>Password : </b></label>
<input name="password" id="password" type="password" placeholder="پسورد"/>&nbsp;&nbsp;
<span id="result"></span>

قطعه کد بالا قسمتی از یک فرم ثبت نام است. حال به قطعه کد جی‌کوئری زیر توجه کنید.

$(document).ready(function () {
    $('#password').keyup(function () {
        $('#result').html(checkStrength($('#password').val()))
    })

    function checkStrength(password) {
        var strength = 0
        if (password.length < 6) {
            $('#result').removeClass()
            $('#result').addClass('short')
            return 'خیلی کوتاه'
        }
        if (password.length > 7) strength += 1

        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

        if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

        if (strength < 2) {
            $('#result').removeClass()
            $('#result').addClass('weak')
            return 'ضعیف'
        } else if (strength == 2) {
            $('#result').removeClass()
            $('#result').addClass('good')
            return 'خوب'
        } else {
            $('#result').removeClass()
            $('#result').addClass('strong')
            return 'قوی'
        }
    }
});

در قطعه کد بالا تابعی به اسم checkStrength تعریف شده است که عمل بررسی قدرت رمزعبور را انجام می‌دهد. این تابع را در رویداد keyup بر روی فیلد ورودی با شناسه password فراخوانی کردیم تا پس از ورود هر کاراکتر توسط کاربر قدرت رمزعبور را بررسی کند و نتیجه را تغییر دهد. همچنین تگ span به شناسه(id) result تعریف شده است که قدرت رمزعبور را در آن نمایش دهیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.