Question

我想仅使用引导Jquery和CSS复制强度计，如下所示。如给定示例中那样，是使用有角JS完成的。我绝对是jQuery的初学者，因此寻求帮助。

原始链接 Link

我的JSFiddle Link

<form>
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" autofocus required>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="form-group form-row">
        <div class="col">
            <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Confirm Password">
        </div>

        <div class="sign__forms__password__strength">
            <div class="strength__meter__fill">

            </div>
        </div>


    </div>
</form>

Answer 1

以下是密码强度计的示例，您可以参考此代码。

HTML PAGE

$.strength = function(element, password) {
  var desc = [{
    'width': '0px'
  }, {
    'width': '20%'
  }, {
    'width': '40%'
  }, {
    'width': '60%'
  }, {
    'width': '80%'
  }, {
    'width': '100%'
  }];
  var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
  var score = 0;

  if (password.length > 6) {
    score++;
  }

  if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) {
    score++;
  }

  if (password.match(/\d+/)) {
    score++;
  }

  if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) {
    score++;
  }

  if (password.length > 10) {
    score++;
  }

  element.removeClass(descClass[score - 1]).addClass(descClass[score]).css(desc[score]);
};

$(function() {
  $("#pwd").keyup(function() {
    $.strength($("#progress-bar"), $(this).val());
  });
});

form {
  max-width: 400px;
  padding: 1em;
}

*:focus {
  outline-style: none;
}

input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #ddd;
}

#progress {
  height: 20px;
  width: 100%;
  margin-top: 0.6em;
}

#progress-bar {
  width: 0%;
  height: 100%;
  transition: width 500ms linear;
}

.progress-bar-danger {
  background: #d00;
}

.progress-bar-warning {
  background: #f50;
}

.progress-bar-success {
  background: #080;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <input type="password" id="pwd" placeholder="Password" autocomplete="off">
    <div id="progress">
      <div id="progress-bar"></div>
    </div>
  </div>
</form>

Answer 2

假设我们在您的密码输入标签“ pwsd”中放置了另一个类名，并在密码输入标签之后的原始链接中添加了一个类似于您原始链接的结果划分，我们假设结果应存储在“ the_result”类中

 $('.pswd').on('keyup', function(e){
     var count = e.target.value.length;
    if(parseFloat(count) >= 7){
       $('.the_result').html('7+')
    }
    else{
     $('.the_result').html(parseFloat(count))
    }
 })

jQuery Bootstrap 4密码强度计

2 个答案: