这篇文章主要为大家详细介绍了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如何验证密码强度的详细内容,更多请关注本站其它相关文章!