در این پست قصد داریم به همرا یک مثال، پیاده سازی Password Complexity Validation را در JavaScript و jQuery که با Regular Expression انجام خواهد شد را شرح دهیم.

کد HTML زیر دارای یک المان Input از نوع TextBox و یک Span می باشد. المان Input یک رویداد جاوااسکریپت به نام OnKeyUp است که تابع CheckPasswordstrength را فراخوانی می کند.

درون این تابع جاوااسکریپت، مجموعه ای از Regular Expression ساخته شده است.

وقتی که کاربر در TextBox می نویسد، تابع CheckPasswordstrength اجرا می شود و مقدار درون Textox با هریک از Regular Expressionهای موجود در مجموعه، تست خواهد شد و اگر پسورد با Regex مطابقت داشت، مقدار متقیر، توسط 1 افزایش پیدا می کند.

سپس طول رمز عبور بررسی شده، اگر طول آن بزرگتر از 8 بود، مقدار متغیر توسط 1 افزایش پیدا می کند.

در آخر، براساس مقدار نهایی متغیر، نتیجه در المان SPAN نمایش داده می شود.

<input type="text" id="txtPassword" onkeyup="CheckPasswordStrength(this.value)" />
<span id="password_strength"></span>
<script type="text/javascript">
    function CheckPasswordStrength(password) {
        var password_strength = document.getElementById("password_strength");
 
        //TextBox left blank.
        if (password.length == 0) {
            password_strength.innerHTML = "";
            return;
        }
 
        //Regular Expressions.
        var regex = new Array();
        regex.push("[A-Z]"); //Uppercase Alphabet.
        regex.push("[a-z]"); //Lowercase Alphabet.
        regex.push("[0-9]"); //Digit.
        regex.push("[$@$!%*#?&]"); //Special Character.
 
        var passed = 0;
 
        //Validate for each Regular Expression.
        for (var i = 0; i < regex.length; i++) {
            if (new RegExp(regex[i]).test(password)) {
                passed++;
            }
        }
 
        //Validate for length of Password.
        if (passed > 2 && password.length > 8) {
            passed++;
        }
 
        //Display status.
        var color = "";
        var strength = "";
        switch (passed) {
            case 0:
            case 1:
                strength = "Weak";
                color = "red";
                break;
            case 2:
                strength = "Good";
                color = "darkorange";
                break;
            case 3:
            case 4:
                strength = "Strong";
                color = "green";
                break;
            case 5:
                strength = "Very Strong";
                color = "darkgreen";
                break;
        }
        password_strength.innerHTML = strength;
        password_strength.style.color = color;
    }
</script>

پیاده سازی Password Complexity Validation با jQuery

کد HTML زیر دارای یک المان Input از نوع TextBox و یک المان Span می باشد. به المان Input یک رویداد جی کوئری به نام OnKeyUp اختصاص داده شده است.

درون رویداد OnKeyUp جی کوئری، یک مجموعه از Regular Expression ساخته شده وجود دارد.

وقتی که کاربر در TextBox می نویسد، رویداد OnKeyUp مربوط به جی کوئری اجرا می شود و مقدار درون Textox با هریک از Regular Expressionهای موجود در مجموعه، تست خواهد شد و اگر پسورد با Regex مطابقت داشت، مقدار متقیر، توسط 1 افزایش پیدا می کند.

سپس طول رمز عبور بررسی شده، اگر طول آن یزرگتر از 8 بود، مقدار متغیر توسط 1 افزایش پیدا می کند.

در آخر، براساس مقدار نهایی متغیر، نتیجه در المان SPAN نمایش داده می شود.

<input type="text" id="txtPassword" />
<span id="password_strength"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#txtPassword").bind("keyup", function () {
            //TextBox left blank.
            if ($(this).val().length == 0) {
                $("#password_strength").html("");
                return;
            }
 
            //Regular Expressions.
            var regex = new Array();
            regex.push("[A-Z]"); //Uppercase Alphabet.
            regex.push("[a-z]"); //Lowercase Alphabet.
            regex.push("[0-9]"); //Digit.
            regex.push("[$@$!%*#?&]"); //Special Character.
 
            var passed = 0;
 
            //Validate for each Regular Expression.
            for (var i = 0; i < regex.length; i++) {
                if (new RegExp(regex[i]).test($(this).val())) {
                    passed++;
                }
            }
 
 
            //Validate for length of Password.
            if (passed > 2 && $(this).val().length > 8) {
                passed++;
            }
 
            //Display status.
            var color = "";
            var strength = "";
            switch (passed) {
                case 0:
                case 1:
                    strength = "Weak";
                    color = "red";
                    break;
                case 2:
                    strength = "Good";
                    color = "darkorange";
                    break;
                case 3:
                case 4:
                    strength = "Strong";
                    color = "green";
                    break;
                case 5:
                    strength = "Very Strong";
                    color = "darkgreen";
                    break;
            }
            $("#password_strength").html(strength);
            $("#password_strength").css("color", color);
        });
    });
</script>