<!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. [hihoCoder] #1032 : 最长回文子串

    时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这 ...

  2. QThread 实用技巧、误区----但文档中没有提到

    本文主要内容: 在任务一中,用 四 种方式实现:点击界面按钮,开线程运行一段程序,结果显示在一个Label上.1. 用不正确的方式得到看似正确的结果2. 用Qt Manual 和 例子中使用的方法3. ...

  3. 一处疑难杂症的术后总结：WebView和JavaScript之间的交互

    近期在公司里參与了M3项目的开发,这个项目是使用HTML5开发的前端页面,在开发完成后,把项目地址写入Android.iOS的壳源代码里面,这样当应用被打开时候自己主动加载项目首页的URL.这样的做法 ...

  4. [elk]停电日志离线恢复故障处理-elk环境极速搭建

    es数据手动导入 周末停电了两天,发现两天的日志没导入: 原因: 1. elk开启没设启动 2.日志入库时间是当前时间,不是日志本身的time字段 - 导入步骤 1. 先把日志拖下来 2. 事先需要干 ...

  5. NGUI学习笔记（六）：ScrollView、Grid和Table

    下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...

  6. java jvm perf

    http://www.oracle.com/technetwork/java/performance-138178.html http://www.oracle.com/technetwork/jav ...

  7. Java、MySQL - 前补0的方法

    前补0的格式化方式在业务系统中经常使用,记录下此api. Java: public static void main(String[] args) { // 0002 System.out.print ...

  8. destoon的如何显示tag生成的sql语句

    destoon 如何显示tag生成的sql语句 在tag.func.php中第117行加入 echo $query;  就只可以了

  9. sqlachemy中批量删除的问题

    db.session.query(Article).filter(Article.id.in_(items)).delete() 报错: sqlalchemy.exc.InvalidRequestEr ...

  10. Matlab如何令三维抽象数据可视化的显示出来

    Mathworks File Exchange频道近期更新了一个小函数.能够将三维数据矩阵相应的函数u=f(x,y,z)可视化的显示出来. 对我们这些常和数据分析问题打交道的人爱说.还是有点參考价值的 ...