Lập trình web

Hướng dẫn tạo đồng hồ bảo mật cho form đăng ký

Chia sẻ nhanh

Dưới đây là một ý tưởng khá thú vị để do tính bảo mật của mật khẩu (password strength) khi đăng kí. Một chiếc đồng hồ bắt mắt đo password strength sẽ khiến form đăng kí website của bạn sinh động và chuyên nghiệp hơn.





DEMO DOWNLOAD

Hướng dẫn.

Tạo file HTML có nội dung

<!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>


Jquery

$(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');
		}
	});

});



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;
}


Thưởng thức thành quả của mình thôi. :)

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?