<!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. angular.js快速入门 hello world

    我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...

  2. CF 366E - Dima and Magic Guitar 最远曼哈顿距离

    题目:http://codeforces.com/problemset/problem/366/E 事实上就是找 n * m 矩阵中数字 x 和 数字 y 的最远距离. 方法參照武森的论文<浅谈 ...

  3. 可以动态增加系统的U盘启动器(基于grub)

    前言:最近面试无果,就在宿舍看那本<30天自制操作系统>,里面使用的系统文件格式是img,要在真机上运行,就需要使用U盘进行启动,因为现在都没有软盘.而网上很多都是用软件写入U盘的.反正我 ...

  4. B+树在数据库中的应用

    B+树在数据库中的应用 flyfish 2015-7-6 B+树在数据库中的应用重要是实现索引 应用方式一 ID为表的主键,利用主键建立一棵B+树 叶子结点存储记录的地址 应用方式二 ID为表的主键. ...

  5. angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

    在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...

  6. csdn能不靠点谱啊

    以前的时候在csdn上有一个博客,那时经常出错,所以就不用了,后来在百度上开了个博客,后以空间升级了,升级之后,那叫一个垃圾,不用了,现在返回头来再用csdn,刚开始两天还好,没用两天又不行了,想在上 ...

  7. spring boot设定mysql

    mysql创建表,制定自增,utf-8编码 create table person(id int auto_increment primary key,  name varchar(100), age ...

  8. Ubuntu 16.04和win10双系统时间不一致解决办法

    windows10和ubuntu16.04双系统,装完后,在windows下时间不对,之前的老办法是: sudo gedit /etc/default/rcS 2 utc=yes 改成utc=no 然 ...

  9. wp中的动画

    动画目标:必须是依赖属性.可以用于Double,Color,Point,Object类型.对应的动画类后面加Animation,下面代码演示旋转360°. <Button Content=&qu ...

  10. Maven学习之（一）基本配置

    安装maven还几次没成功,不过最后还是查资料成功了,所以记录一下. 1.安装JDK,比较简单,就不说明了. 2.配置java的环境变量 JAVA_HOME (最开始因为java配置成C:\Progr ...