اپیلیکیشن اعتبار سنجی پسورد

اپیلیکیشن اعتبار سنجی پسورد

در این آموزش ما به شما نحوه ساخت اپیلیکیشنی رو می دهیم تا میزان قدرت و طول پسورد وارد شده هنگام ثبت نام یک کاربر جدید را محاسبه کرده و به صورت شکلی مثل سرعت سنج ماشین نمایش بدهد.

برای مشاهده لینک وارد شود

ما مار را با نوشتن کد استانداردHTML5 برای فرم ثبت نام آغاز می کنیم.ما در این کد فقط بخش محاسبه طول و قدرت پسورد را می نویسیم ولی اگر شما بخواهید یک فرم ثبت نام کامل رو ایجاد کنید شما باید کد سمت سرور را نیز بنویسید.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a Beautiful Password Strength Indicator</title>

        <!-- The stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="main">

        	<h1>Sign up, it's FREE!</h1>

        	<form class="" method="post" action="">

        		<div class="row email">
        			<input type="text" id="email" name="email" placeholder="Email" />
        		</div>

        		<div class="row pass">
        			<input type="password" id="password1" name="password1"
 placeholder="Password" />
        		</div>

        		<div class="row pass">
        			<input type="password" id="password2" name="password2"
 placeholder="Password (repeat)" disabled="true" />
        		</div>

        		<!-- The rotating arrow -->
        		<div class="arrowCap"></div>
        		<div class="arrow"></div>

        		<p class="meterText">Password Meter</p>

        		<input type="submit" value="Register" />

        	</form>
        </div>

        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="assets/js/jquery.complexify.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

ما قبل از بستن تگ body کتابخانه jQuery و script.js را وارد می کنیم.

jQuery

کد jQuery زیر بسیار ساده است.ما چندین event را برای المان ها مینویسیم به عنوان مثال:اگر erorre اتفاق بیافتد ما کلاس erorre را به تگ .row اضافه میکنیم  و این پیام هایی به رنگ قرمز نمایش می دهدو اگر sucsess اتفاق بیافتد ما از کلاس sucsess برای نمایش پیام هایی به رنگ سبز استفاده می کنیم که به معنی موفقیت عمل مورد نظر است.

assets/js/script.js

$(function(){

    // Form items
    var pass1 = $('#password1'),
        pass2 = $('#password2'),
        email = $('#email'),
        form = $('#main form'),
        arrow = $('#main .arrow');

    // Empty the fields on load
    $('#main .row input').val('');

    // Handle form submissions
    form.on('submit',function(e){

        // Is everything entered correctly?
        if($('#main .row.success').length == $('#main .row').length){

            // Yes!
            alert("Thank you for trying out this demo!");
            e.preventDefault(); // Remove this to allow actual submission

        }
        else{

            // No. Prevent form submission
            e.preventDefault();

        }
    });

    // Validate the email field
    email.on('blur',function(){

        // Very simple email validation
        if (!/^\S+@\S+\.\S+$/.test(email.val())){
            email.parent().addClass('error').removeClass('success');
        }
        else{
            email.parent().removeClass('error').addClass('success');
        }

    });

    /* The Complexify code will go here */

    // Validate the second password field
    pass2.on('keydown input',function(){

        // Make sure it equals the first
        if(pass2.val() == pass1.val()){

            pass2.parent()
                    .removeClass('error')
                    .addClass('success');
        }
        else{
            pass2.parent()
                    .removeClass('success')
                    .addClass('error');
        }
    });

});

با استفاده از این راه،ما میتوانیم با استفاده از پلاگین complexify اعتبار رمز وارد شده را بسنجیم.این پلاگین دو کار می کند: اول اینکه بسته به طول رمز ورودی درصدی بین۰ تا ۱۰۰ به پیچیدگی رمز میدهد و دوم اینکه کمترین طول پسورد را محاسبه می کند تا رمز وارد شده از حد مجاز کمتر نباشد که این کار توسط minimumChars کنترل می شود.

با strengthScaleFactor شما میتونید به کاربر اجازه دهید تا رمز هایی ساده نیز انتخاب کنند.

مقدار پیش فرض ۱ است می توانند از حروف کوچک و بزرگ،اعداد و کاراکتر های خاصی استفاده کنند ولی من فکر میکنیم این کار را سخت می کند پس من آن ها را بر ۰.۷ تقسیم کردم تا اعداد ساده تری بدست آید.

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){

    if(valid){
        pass2.removeAttr('disabled');

        pass1.parent()
                .removeClass('error')
                .addClass('success');
    }
    else{
        pass2.attr('disabled','true');

        pass1.parent()
                .removeClass('success')
                .addClass('error');
    }

    var calculated = (complexity/100)*268 - 134;
    var prop = 'rotate('+(calculated)+'deg)';

    // Rotate the arrow. Additional rules for different browser engines.
    arrow.css({
        '-moz-transform':prop,
        '-webkit-transform':prop,
        '-o-transform':prop,
        '-ms-transform':prop,
        'transform':prop
    });
});

اگر یک پسورد مورد قبول بود ما قسمت دوم پسورد را فعال می کنیم.ما همچنین از CSS برای چرخاندن عقربه استفاده میکنیم.عقربه از ۱۳۴- تا ۱۳۴ درجه حرکت خواهد کرد.

CSS

در زیر ما کمی با کد های CSS به اپیلیکیشن ظاهری جذاب می دهیم و نحوه حرکت عقربه را تعیین می کنیم.

assets/css/styles.css

#main form .arrow{
    background: url("../img/arrow.png") no-repeat -10px 0;
    height: 120px;
    left: 214px;
    position: absolute;
    top: 392px;
    width: 11px;

   	/* Defining a smooth CSS3 animation for turning the arrow */

    -moz-transition:0.3s;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;

    /* Putting the arrow in its initial position */

    -moz-transform: rotate(-134deg);
    -webkit-transform: rotate(-134deg);
    -o-transform: rotate(-134deg);
    -ms-transform: rotate(-134deg);
    transform: rotate(-134deg);
}

/* The small piece that goes over the arrow */
#main form .arrowCap{
    background: url("../img/arrow.png") no-repeat -43px 0;
    height: 20px;
    left: 208px;
    position: absolute;
    top: 443px;
    width: 20px;
    z-index: 10;
}

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


9 − = سه

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>