JS实现的四级密码强度检测功能示例
本文实例讲述了JS实现的四级密码强度检测功能。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 密码强度检测 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
#tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
#tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
#tips .s1{background: #F45A68;}/*红色*/
#tips .s2{background: #fc0;}/*橙色*/
#tips .s3{background: #cc0;}/*黄色*/
#tips .s4{background: #14B12F;}/*绿色*/
</style>
</head>
<body>
<input type="text" id="password" value="" maxlength="16" />
<div id="tips">
<span>弱</span>
<span>中</span>
<span>强</span>
<span>很强</span>
</div>
</body>
<script type="text/javascript">
var password = document.getElementById("password"); //获取文本框的对象
//var value = password.value; //获取用户在文本框里面填写的值
//获取所有的span标签 返回值是一个数组
var spanDoms = document.getElementsByTagName("span");
password.onkeyup = function(){
//获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
var index = checkPassWord(this.value);
for(var i = 0; i <spanDoms.length; i++){
spanDoms[i].className = "";//清空span标签所有的class样式
if(index){//0 代表false 其余代表true
spanDoms[index-1].className = "s" + index ;
}
}
}
//校验密码强度
function checkPassWord(value){
// 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
// 3： 表示第四个级别 4：表示第五个级别
var modes = 0;
if(value.length < 6){//最初级别
return modes;
}
if(/\d/.test(value)){//如果用户输入的密码 包含了数字
modes++;
}
if(/[a-z]/.test(value)){//如果用户输入的密码 包含了小写的a到z
modes++;
}
if(/[A-Z]/.test(value)){//如果用户输入的密码 包含了大写的A到Z
modes++;
}
if(/\W/.test(value)){//如果是非数字 字母 下划线
modes++;
}
switch(modes){
case 1 :
return 1;
break;
case 2 :
return 2;
break;
case 3 :
return 3;
break;
case 4 :
return 4;
break;
}
}
</script>
</html>
说明： 这里实现的功能主要是，输入密码的时候，一边输一边检测，有四个安全级别，当输入的密码符合某个级别的规则时，该级别的标志条就会高亮变色。
下面是测试的情况，（这里为了能看到效果，所以把type=“password”故意改成type=“text”），至于检测中级别的规则，读者可以自己根据需要自行修改，主要是js正则表达式的修改。另外，当把最后一个图片的输入内容，逐步地删除，直到只剩第一个图片的输入内容，这一过程中，效果就是下面的 从下到上变化了
PS：这里再为大家提供几款相关在线工具供大家参考使用：
密码安全性在线检测：
http://tools.jb51.net/password/my_password_safe
在线随机数字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu
高强度密码生成器：
http://tools.jb51.net/password/CreateStrongPassword
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript密码强度校验代码（两种方法）
先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur
-
Js密码强度实时验证代码
效果图:演示代码: 密码强度测试 //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN =65 && iN =97 && iN >>=1; } return modes; } //checkStrong函数 //返回密码的强度级别 function checkStrong(sPW){ if (sPW.length 输入密码: 密码强度: 弱 中 强 [Ctr
-
js实现密码强度检测【附示例】
这篇文章主要介绍了js实现密码强度检测的相关实例,第一个例子给出了全部代码,可以直接运行,第二个例子只给出了js代码,感兴趣的码农可以自己完成第二个实例. 第一个实例 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=
-
javascript实现密码强度显示
密码强度显示和中文强弱显示 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'a.jsp' starting page</title> <
-
JavaScript动态检验密码强度的实现方法
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以我通过其他方式实现. 实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度. 密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来表现密码的强度的.原理很简单,但是在操作过程中,可能会遇到一些问题很头疼. 1.先在html页面里面
-
js密码强度校验
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能,在以前的文章中,我们曾经给出过一段检验密码强度的例子,今天再看一个与<js密码强度校验>的代码. 效果: <html> <head> <script language="javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字
-
js检验密码强度(低中高)附图
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type=
-
js密码强度实时检测代码
密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条. <div class="vali_pass"> <h3>简单的密码强度检测</h3> <input type=
-
JS 密码强度验证(兼容IE,火狐,谷歌)
大概样式: 源码: 复制代码 代码如下: //=================HTML页面================= <body onload="InitCss();"> <form> <div> <table> <tr> <td> 密码: </td> <td> <input id="txtPassword" type="password&quo
-
js检测用户输入密码强度
一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效
-
js密码强度检测
本文实例讲解了js密码强度检测的实现代码,分享给大家供大家参考,具体内容如下 运行效果图: 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 function Ch
-
js正则表达式验证密码强度【推荐】
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400
-
JavaScript 密码强度判断代码
复制代码 代码如下: <script type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122)
-
JavaScript判断密码强度(自写代码)
在一些网站注册的时候经常可以看到密码强度提示,例如优酷: 今天自己做了一个JS密码强度判断,效果如下: 以下是代码: 复制代码 代码如下: <html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1;