Bootstrap Snippet Password Check using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 ---------->
<div class="container">
    <div class="page-header">
        <h1>Password Check</h1>
    </div>
    <form class="form-horizontal" method="POST" id="form_1">
        <div class="form-group">
            <label for="pass" class="col-sm-2 control-label">password</label>
            <div class="col-sm-10">
                <input type="password" name="pass" id="pass"  class="form-control" />
            </div>
        </div>
    </form>
    <hr>
    <p class="text-muted"><small>Based in: http://jsfiddle.net/aleem/KE3RB/8/</small></p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.fn.PassCheck = function(parametros){
  // gusma62@gmail.com
  // Requiere: JQuery, Bootstrap 3, FontAwesome 
  // Basado en http://jsfiddle.net/aleem/KE3RB/8/
  var parametros = parametros || '';
  var input = this;
  var help_block = $(input).parent().find(".help-block");
  var form_group = $(input).closest(".form-group");
  if(help_block.length < 1){
    $(input).parent().append( '<span class="help-block"></span>' );
    help_block = $(input).parent().find(".help-block");
  }
  this.comprobar = function(){
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    $(form_group).removeClass(function(index, css){// http://stackoverflow.com/a/5182103
      return (css.match (/(^|\s)has-\S+/g) || []).join(' ');
    });
    if (false == enoughRegex.test($(input).val())) {
      $(form_group).addClass("has-error");
      $(help_block).html('<i class="fa fa-remove"></i> Pocos Caracteres');
      // return false;
    }
    else if (strongRegex.test($(input).val())) {
      $(form_group).addClass("has-success");
      $(help_block).html('<i class="fa fa-check"></i> Contraseña Fuerte');
      // return true;
    }
    else if (mediumRegex.test($(input).val())) {
      $(form_group).addClass("has-warning");
      $(help_block).html('<i class="fa fa-circle-o"></i> Seguridad Media');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Password Check"
Bootstrap 3.3.0 Snippet by gusma62

Related: See More

Questions / Comments:

"Password Check" Bootstrap 3.3.0 Snippet by gusma62

Related: See More

Questions / Comments:

"Password Check"
Bootstrap 3.3.0 Snippet by gusma62