jQuery实用密码强度检测

JQ实用密码强度检测

通过正则来判断验证密码强弱并通过替换提示图片进行显示。

素材图片，请自取：

超文本标记语言源码：

表格样式=' width :320 px ' margin :40 px自动' tr th密码/th TD span class=' TBL-txt '输入id=' pass ' class=' input-style ' size=' 30 ' maxlength=' 30 ' name=' pass ' type=' text '/span/TD/tr th/th TD id=' level ' class=' pw-strength ' div class=' pw-bar '/div class=' pw-bar-on '/div class=' pw-txt ' span弱/span跨度中/span跨度强/span/div/TD/tr/表格钢性铸铁源码：TBL-txt { font-size :14 px；} .tbl-txt输入{ padd :0 5px h8 :22 px线高：22 px边距-底部：6 px} .pw-强度{clear:双双；相对位置：top: 8px宽度： 180像素；} .pw-bar {背景： URL(图片/pwd-1。巴布亚新几内亚)无重复；位置：相对；top :1 x h8 : 14px飞越：隐藏；宽度： 179像素；} .背景上的pw-bar { : URL(images/pwd-2。png)不重复；宽度：0 px高度：14px绝对位置：top: 1pxleft: 2px宽度为：5s的缓和曲线；-moz-transit :宽度。5s易于安装；-网络套件-transit :宽度。5s简易版；-o-transit :宽度。5s宽松；} .pw-弱pw-de fle {宽度：0 px} .pw-弱pw-bar-on { width : 60px；} .pw-中等pw-bar-on {宽度： 120 px} .普华永道pw-bar-on {宽度： 179 px} .pw-txt { padding-top : 2px；宽度： 180像素；飞越：隐藏；} .pw-txt span { color : # 707070；向左浮动：font-size : 12px文本对齐：中心；宽度： 58px} javascript源码：

$(function(){ $(“# pass”)).keyup(function(){ var strong regex=new regexp('^(？=.{8,})(?=.*[A-Z])(？=.*[a-z])(？=.*[0-9])(?=.*\\W).*$ '、' g ')；新RegExp('^(？=.{7,})(((?=.*[A-Z])(？=.*[a-z]))|((？=.*[A-Z])(？=.*[0-9]))|((?=.*[a-z])(？=.*[0-9]))).*$ '、' g ')；var enoughRegex=new RegExp('(？=.{6,}).*、' g ')；if(false==enoughregex。测试($(本)).val())) { $('#level ').移除CLaSS(' pw-weak ')；$('#level ').移除CLaSS(' pw-medium ')；$('#level ').移除CLaSS(' pw-strong ')；$('#level ').addCLaSS(' pw-de fle ')；//密码小于六位的时候，密码强度图片都为灰色} else if(强正则表达式。测试($(本)).val())) { $('#level ').移除CLaSS(' pw-weak ')；$('#level ').移除CLaSS(' pw-medium ')；$('#level ').移除CLaSS(' pw-strong ')；$('#level ').addCLaSS(' pw-strong ')；//密码为八位及以上并且字母数字特殊字符三项都包括，强度最强} else if(mediumregex。测试($(本)).val())) { $('#level ').移除CLaSS(' pw-weak ')；$('#level ').移除CLaSS(' pw-medium ')；$('#level ').移除CLaSS(' pw-strong ')；$('#level ').addCLaSS(' pw-medium ')；//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等} else { $('#level ').移除CLaSS(' pw-weak ')；$('#level ').移除CLaSS(' pw-medium ')；$('#level ').移除CLaSS(' pw-strong ')；$('#level ').addCLaSS(' pw-weak ')；//如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的}返回true })；}) 根据上述正则最终效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。