文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery Bootstrap 4密码强度计

问Jquery Bootstrap 4密码强度计
EN

Stack Overflow用户

提问于 2019-07-03 13:26:58

回答 2查看 2.5K关注 0票数 2

我想只使用bootstrap、Jquery和CSS来复制下面这样的强力表。在给定的示例中，是使用angular 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>

jquery

html

css

回答 2

Stack Overflow用户

发布于 2019-07-03 14:04:41

下面的是密码强度计量器的一个例子，你可以参考这个代码。

HTML页面

$.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>

票数 2

Stack Overflow用户

发布于 2019-07-03 15:09:19

假设我们在名为"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))
    }
 })

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56863414

复制

相似问题

问Jquery Bootstrap 4密码强度计
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Bootstrap 4密码强度计EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Bootstrap 4密码强度计
EN