"User Registration"
Bootstrap 3.3.0 Snippet by suhasborage

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <!-- Website CSS style --> <link rel="stylesheet" type="text/css" href="assets/css/main.css"> <!-- Website Font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> <title>Admin</title> </head> <body> <div class="container"> <div class="row main"> <div class="main-login main-center"> <form class="form-horizontal" method="post" action="#"> <section> <h3 class="title">User Registration Form</h3> </section> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Name</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="name" id="name" placeholder="Steve Jobs"/> </div> </div> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Email</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="email" id="email" placeholder="user@example.com"/> </div> </div> </div> <div class="form-group"> <label for="username" class="cols-sm-2 control-label">Username</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username"/> </div> </div> </div> <div class="form-group"> <label for="password" class="cols-sm-2 control-label">Password</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> <input type="password" class="form-control" name="password" id="password" data-toggle="popover" placeholder="Enter your Password"/> </div> <span id="passwordInfo" class="hide"> <ul> <li>At least 6 characters.</li> <li>Use of special Characters like, [@, $].</li> <li>Use of uppercase [A – Z] and lowercase [a – z] letters.</li> <li>Use of numbers [0 – 9].</li> </ul> </span> <span id="result"></span> </div> </div> <div class="form-group"> <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm your Password"/> </div> <span id="confirmPass"></span> </div> </div> <div class="form-group "> <button type="button" class="btn btn-primary btn-lg btn-block login-button">Register</button> </div> <div class="login-register"> <a href="index.php">Login</a> </div> </form> </div> </div> </div> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </body> </html>
/* /* Created by Filipe Pina * Specific styles of signin, register, component */ /* * General styles */ body, html{ height: 100%; background-repeat: no-repeat; background-color: #d3d3d3; font-family: 'Oxygen', sans-serif; } .main{ margin-top: 70px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; color: #fff; } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 330px; padding: 40px 40px; } .login-button{ margin-top: 5px; } .login-register{ font-size: 11px; text-align: center; } .popover{ width:300px; height:150px; } .short{ color:#FF0000; } .weak{ color:#E66C2C; } .good{ color:#2D98F3; } .strong{ color:#006400; }
$(document).ready(function() { $('#password').keyup(function(){ $('#result').html(checkStrength($('#password').val())); $('#confirmPass').html(confirmPasswordCheck()); }); $('#confirm').keyup(function(){ $('#confirmPass').html(confirmPasswordCheck()); }); $('#password').popover({ html: true, content: function() { return $('#passwordInfo').html(); }, placement:"right", trigger:"focus" }); }); function checkStrength(password) { var strength = 0 if (password.length < 6) { $('#result').removeClass() $('#result').addClass('short') return 'Too short' } if (password.length > 7) strength += 1 // If password contains both lower and uppercase characters, increase strength value. if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1 // If it has numbers and characters, increase strength value. if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 // If it has one special character, increase strength value. if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 // If it has two special characters, increase strength value. if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 // Calculated strength value, we can return messages // If value is less than 2 if (strength < 2) { $('#result').removeClass() $('#result').addClass('weak') return 'Weak' } else if (strength == 2) { $('#result').removeClass() $('#result').addClass('good') return 'Good' } else { $('#result').removeClass() $('#result').addClass('strong') return 'Strong' } } function confirmPasswordCheck(){ var password = $('#password'); var confirm = $('#confirm'); $('#confirmPass').removeClass(); if(password.val()!==confirm.val()){ $('#confirmPass').addClass('short'); return 'Password does not Match'; }else{ $('#confirmPass').addClass('Strong'); return 'Password confirmed successfully'; } }

Related: See More


Questions / Comments: