angular js密码强度显示问题

angular js trouble with password strength display

本文关键字：显示 问题 js 密码 angular      更新时间：2023-09-26

我是angular js和编写显示密码强度指令的新手。

这是小提琴https://jsfiddle.net/user_123/3hruj8ce/12/

 <span  data-ng-show='passwordForm.password.$valid && passwordForm.password.$dirty' data-ng-class="strength">
     <li class="point"></li >      
     <li  class="point"></li>
     <li  class="point"></li>         
     <li  class="point"></li> 
</span>

当用户开始输入密码时，我在更新li的颜色时遇到了问题。

非常感谢您的帮助。

提前谢谢。

更新：

这是更新的小提琴（仍然没有按预期工作…）-https://jsfiddle.net/user_123/3hruj8ce/13/

除非您键入一个疯狂的字符串作为密码，否则您的强度计算公式在大多数情况下总是返回1。

无论如何，为了修复css类（强-中-弱），您需要更改

.strong   { color: #060; border-color: #0F0;}

至

.strong > li.point   { background-color: #060; border-color: #0F0;}

并且改变你的公式来降低强度，我相信。

更新：针对一个、两个或三个li，你可以按照将你的类添加到li中

<li class="point weak"><li>
<li class="point weak medium"><li>
<li class="point weak medium strong"><li>

并将css更改为

.strong > li.strong{background-color: #060; border-color: #0F0;}
.medium > li.medium{background-color: #080; border-color: #0F0;}
.weak > li.weak{background-color: #099; border-color: #0F0;}

我已经更新了fiddlehttps://jsfiddle.net/3hruj8ce/14/

li元素的颜色应通过将其类名更改为strong/medial/weak来更改。请检查。

您似乎还没有定义这些：

.strong   { color: #060; border-color: #0F0;}
.medium   { color: #C60; border-color: #FC0;}
.weak     { color: #900; border-color: #F00;}

在您的列表/HTML中。

相关文章：