JS实现的四级密码强度检测功能示例

描述了JS实现的四级密码强度检测功能。分享给大家参考，如下：

！a doctype html public '-//W3C//dtd html 4.01 transitional//en ' ' http://www.w3.org/tr/html4/loose.dtd' html head title密码强度检测/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8 ' style type=' text/CSS ' input { float 3360 left；font-size : 14px；宽度： 250 px；高度： 25px；border: 1px固体# cccpadding-left : 10px；} # tips {左侧浮动：font-size : 12px；宽度： 400 px；高度： 25px；margin: 4px 0 0 20px} # tips span { float: left宽度： 40px；height: 20pxcolor: # fff飞越：隐藏；margin-right : 10px；背景# D7D9DD线高：20 px；文本对齐：中心；} # tips . S1 { background : # F45A 68；}/*红色*/# tips . S2 { background : # fc0；}/*橙色*/# tips . S3 { background : # cc0；}/*黄色*/# tips . S4 { background : # 14 b12f；}/* green *//style/head body输入类型=' text' id=' password '值=' maxlength=' 16 '/div id=' tips ' span weak/span span medium/span span strong/span span strong/div/body脚本类型=' text/JavaScript ' var password=document . getelementbyid(' password ')；//获取文本框的对象//var value=password . value；//获取用户在文本框中填写的值//获取所有跨度标签。返回值为数组var span doms=document . getelementsbyname(' span ')；Password.onkeyup=function(){ //获取用户输入的密码，然后判断其强度返回0或1 2 3 4 var index=check password(这。值)；for(var I=0；I跨度.长度；i ){ spanDoms[i]。className=//如果(index){//0代表false，其余代表true span doms [index-1]，则清除span标签的所有类样式。类名=' s '索引；} } }//检查密码强度函数检查密码(值){//0:表示第一级1:表示第二级2:表示第三级//3:表示第四级4:表示第五级var modes=0；If(value.length 6){//初始级别返回模式；} if(/\d/。test(value)){//如果用户输入的密码包含数字模式；} if(/[a-z]/。test(value)){//如果用户输入的密码包含小写a到z模式；} if(/[A-Z]/。test(value)){//如果用户输入的密码包含大写a到Z模式；} if(/\W/。test(value)){//如果是带下划线的非数字字母模式；}开关(模式){案例1 :返回1；打破；案例2 :退货2；打破；案例3 :退货3；打破；案例4 :退货4；打破；}} /script/html说明：这里实现的主要功能是输入密码时，可以同时输入和检测。有四个安全级别。当输入的密码符合某个级别的规则时，该级别的标志栏会高亮显示并变色。

下面是测试情况(这里为了看效果，特意把type="password "改成了type=" text ")。至于测试中的中级规则，读者可以根据自己的需要进行修改，主要是js正则表达式的修改。另外，当最后一张图片的输入内容逐渐被删除，直到只剩下第一张图片的输入内容时，效果是下面从下往上变化

PS:这里有一些相关的在线工具供大家参考：

密码安全在线检测：http://tools.jb51.net/password/my_password_safe

在线随机数/字符串生成工具：http://tools.jb51.net/aideddesign/suijishu

高强度密码生成器：http://tools.jb51.net/password/CreateStrongPassword

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。