js实现密码强度
2016-01-26 09:57
429 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js密码强度</title> <style type="text/css"> .pw_letter{ margin-top:5px; font-size: 12px; } .pw_letter label{float: left; margin-right:10px; cursor: default; font-size: 12px; line-height: 16px;;} .pw_letter span{ float: left; display:inline-block; width:30px; height:16px; line-height:16px; text-align:center; color:#FFF; background-color:#ccc; border-left: 1px solid #FFF;} .pw_letter span.pw_strength_color{ background-color:green;} </style> </head> <body> <input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())"> <div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </div> <script type="text/javascript"> /* *密码安全程度 *return 1 :全部为字母或者数字,或者密码长度小于6 *return 2 : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return 3 : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length>0 && this.length<=6) return 1; var n1 = (this.search(/[a-zA-Z]/) != -1) ? 1 : 0, n2 = (this.search(/[0-9]/) != -1) ? 1 : 0, n3 =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{1,}/) != -1) ? 1 : 0; return n1+n2+n3; } String.prototype.trim = String.prototype.trim || function(){ return this.replace(/^\s+|\s+$/g,""); } function setPasswordStrength(pwd){ var strength_span = document.getElementsByClassName("strength"); for(var i=0; i<strength_span.length; i++){ strength_span.item(i).className="strength"; } for(var i=0; i<pwd.passwordStrength(); i++){ document.getElementsByClassName("strength").item(i).className="strength pw_strength_color"; } } </script> </body> </html>
相关文章推荐
- JavaScript 运行机制详解:再谈Event Loop
- 深入理解JavaScript系列
- JS正则表达式比较常见用法
- eval解析JSON中的注意点
- JSON数据(语义格式)多对象解析
- JSP中 <c:if test="${key1!=null}">是什么意思
- 笔记——javascript图片库改进版
- js获取网页高度(详细整理)
- JavaScript正则表达式下——相关方法
- JavaScript 正则表达式上——基本语法
- JSTL入门
- 探究Javascript模板引擎mustache.js使用方法
- JS实现简单的二维矩阵乘积运算
- js实现的页面矩阵图形变换特效
- JavaScript小技巧整理篇(非常全)
- 基于JavaScript实现全屏透明遮罩div层锁屏效果
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- JavaScript+html5 canvas绘制渐变区域完整实例
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- JavaScript html5 canvas画布中删除一个块区域的方法