<!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>

js实现密码强度的更多相关文章

  1. 正则表达式之js检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  2. js判断密码强度

    html代码: <form name="form1" action=""> 密码:<input type="password&quo ...

  3. js 检验密码强度

    html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=&quo ...

  4. js实现密码强度验证

    <html> <head> <meta http-equiv="content-type" content="text/html" ...

  5. 【javascript】js 检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  6. Js判断密码强度并显示提示信息

    用javascipt实现的Ajax判断密码强弱的功能,大多数有用户注册功能的网站,都会有这么一个功能,作为WEB程序员,应该会写这种小模块哦,不懂的就看下这个例子,觉得挺简单,当初帮助了不少人学会了密 ...

  7. js判断密码强度是否符合

    /** 判断密码强度是否符合 */ function check_passwd_intensity(password) { value = $.trim(password); if( value.le ...

  8. js校验密码强度

    网上转载的一段代码,留着以后用, js文件: //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN <=57) //数字 ...

  9. js检测密码强度

    <script> function AuthPasswd(string) {     if(string.length >=6) {         if(/[a-zA-Z]+/.t ...

随机推荐

  1. cocos2d-x开发记录：二，基本概念（粒子系统，Scheduler和定时器）

    七,粒子系统 1.导言 术语粒子系统是指计算机图形学技术,它使用大量非常小的精灵或其他图形对象来模拟某些种类的“模糊”现象,于传统渲染技术相比,它很难复制.通常是高度混沌无序的系统,自然现象.化学反应 ...

  2. WPF控件TreeView使用

    需要多级嵌套要用TreeViewItem,而这个在大纲视图右键控件可以点出来. 代码控制嵌套Items就可以. 如果显示"(集合)",检查嵌套的是不是TreeViewItem的It ...

  3. 对于火狐浏览器中title不能换行自动变成...怎么解决的？

    width: 100px; overflow: hidden; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis;

  4. feginclient和hystrix的配置

    1.如果设置了 feign: hystrix: enabled: true 则 @FeignClient(value = "service-hi",configuration = ...

  5. Thread中的join使用

    线程中的join方法就是用来等待一个线程完成它自己的全部任务之后才开启下一个进程,join(时间),则表示线程要执行完时间范围才开始下一个工作任务的执行!比如定义join(1500)必须在执行15s后 ...

  6. 工具WinSCP：windows和Linux中进行文件传输

    工具WinSCP:windows和Linux中进行文件传输 2016-09-21 [转自]使用WinSCP软件在windows和Linux中进行文件传输 当我们的开发机是Windows,服务器是Lin ...

  7. Eclipse中直接操作本地文件系统

    你是不是有时候觉得在Eclipse和windows资源管理器(也就是咱平时用的文件浏览器)之间切换很麻烦? Eclipse中也提供了本地文件系统浏览功能,在里面你也可以方便地进行各种文件操作 在Ecl ...

  8. html5 canvas实现梦幻的3D刺猬球

    今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球.页面非常梦幻.效果图如下: 在线预览   源码下载 html代码: <div> <canvas width=&qu ...

  9. Java类型的生命周期

    以上就是我今天没有总结学习类加载器时候对类加载器仅有的知识,虽然有个大概印象,但是还是有点模糊.今天一口气总结一下,参考文献我就不列举了.本文不生产知识,只是知识的搬运工. 静态.class文件到内存 ...

  10. 无法识别的属性 configProtectionProvider的解决方案

    用RsaProtectedConfigurationProvider加密数据库连接字符串时,只要App.config有任何改动,都会提示无法识别的属性 configProtectionProvider ...