jQuery密码强度检测插件密码强度用法实例分析

本文实例讲述了jQuery密码强度检测插件密码强度用法。分享给大家供大家参考，具体如下：

这里赋予密码强度为10个等级（实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每个状态的半铸钢钢性铸铁(铸造半钢)样式来直观地显示当前密码的强度。其中，实现此功能的重点和难点就是通过正则进行判断等级，有兴趣的朋友可以慢慢探究。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-passwordstrengh-plus-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery密码强度插件密码强度实例演示/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script script src=' http : jquery。密码强度。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ var $ pwd=$(' input[name=' password ']')；$ pwd。passwordstrength()；$('.生成_密码').单击(函数(){ //产生随机八位密码var pwd=$。密码强度。getrandompassword(8)；//将随机密码写入密码框，并触发验证$pwd.val(pwd).触发器(“向上键”)；返回false })})；/script style type=' text/CSS ' body { font-size :12 px；} .clearfix:after在{内容： }之后。显示：块；高度：0;clear:both可见性：隐藏；}*html .清除固定{高度：1%；}* html .清除固定{高度：1%；}.l { float:left}。form _ item { margin-bottom :6 px；}.表单项目标签{ width :100 pxtext-align : right；右边距：4 px显示：块；float : leftadd-top :2 px；}.表单项目文本text { height:14pxpadding:2px宽度宽度：132pxborder:1px固体# 999;}.form _ item div a { margin-left :6 px；} # passwordstrengsdiv { margin-top :6 px；} .是0 {背景： URL(图像/进度mg1。png)无重复0 0；宽度宽度：138像素高度：7 px} .is10 {背景-位置：0-7px；} .is20 {背景-位置：0-14px；} .is30 {背景-位置：0-21px；} .is40 {背景-位置：0-28px；} .is50 {背景-位置：0-35px；} .is60 {背景-位置：0-42px；} .is70 {背景-位置：0-49px；} .is80 {背景-位置：0-56px；} .is90 {背景-位置：0-63px；} .is 100 {背景-位置：0-70px；}/style/head dyscript type=' text/JavaScript ' if(文档。getelementbyid(' Google lead ')！=null){文档。getelementbyid(' Google lead ').innerHTML=' div class=' search engine _ AD1 ' '文档。getelementbyid(' Google LeadCode ').innerHTML '/div '；}/script div class=' form _ item clear fix '标签密码：/label div class=' l ' divinput name=' password ' type=' text ' class=' text ' maxlength=' 16 '/a href=' class=' Generate _ password '产生随机密码/a/div div id=' passwordstrengsdiv ' class='是0 '/div/div/div/body/html希望本文所述对大家jQuery程序设计有所帮助。