js如何验证密码强度

2022-01-14,,,

这篇文章主要为大家详细介绍了js如何验证密码强度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

验证“密码强度”的例子很常见,我们注册新的账号的时候往往设置密码,此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。

原理:

1、如果输入的密码为单纯的数字或者字母:提示“

2、如果是数字和字母混合的:提示“” 

3、如果数字、字母、特殊字符都有:提示“

下面是一种“密码强度”的验证方法,觉得很有意思。

HTML和CSS代码:

   密码强度 #pwdStrength { height: 30px; width: 180px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 30px; width: 60px; } .strengthLv2 { background: orange; height: 30px; width: 120px; } .strengthLv3 { background: green; height: 30px; width: 180px; } #pwd { height:30px; font-size :20px; } strong { margin-left:90px; } #pwd1 { color:red; margin-top:5px; margin-bottom:5px; }   <!--密码强度:-->

密码强度:

javascript代码:

 

效果图:

小结:

1.利用onkeyup 事件(在键盘按键被松开时发生)进行三种判断,简单方便。
2. 正则表达式的功能真的很强大。

以上就是js如何验证密码强度的详细内容,更多请关注本站其它相关文章!

《js如何验证密码强度.doc》

下载本文的Word格式文档,以方便收藏与打印。