javascript 密码强度验证程序代码

我们先来看强度规则

1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；       

2) 任何字符数的两类字符组合，中；       

3) 12位字符数以下的三类或四类字符组合，强；       

4) 12位字符数以上的三类或四类字符组合，非常好。

 代码如下 复制代码

<head>   

<title>密码强度检测</title>   

<style type="text/css">       

body { font: 12px/1.5 Arial; }       

input{  float: left;font-size: 12px; width: 150px;font-family: arial; border: 1px solid #ccc; padding: 3px;}       

input.correct{ border: 1px solid green; }       

input.error{border: 1px solid red;}       

#tips{float: left; margin: 2px 0 0 20px; }       

#tips span {float: left;  width: 50px; height: 20px; color: #fff;overflow: hidden;background: #ccc;margin-right: 2px;line-height: 20px; text-align: center;}       

#tips.s1 .active { background: #f30; }       

#tips.s2 .active {background: #fc0; }       

#tips.s3 .active {background: #cc0;}       

#tips.s4 .active  {background: #090; }   

</style>   

<script type="text/javascript">       

window.onload = function () {           

var oTips = document.getElementById("tips");           

var oInput = document.getElementsByTagName("input")[0];           

var aSpan = oTips.getElementsByTagName("span");           

var aStr = ["弱", "中", "强", "非常好"];           

var i = 0;

oInput.onkeyup = oInput.onfocus = oInput.onblur = function () {               

var index = checkStrong(this.value);               

this.className = index ? "correct" : "error";               

oTips.className = "s" + index;               

for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";               

index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])             }         };       

 

//检测密码强度       

function checkStrong(sValue) {           

var modes = 0;           

if (sValue.length < 6) return modes;           

if (/d/.test(sValue)) modes++; //数字           

if (/[a-z]/.test(sValue)) modes++; //小写           

if (/[A-Z]/.test(sValue)) modes++; //大写            

if (/W/.test(sValue)) modes++; //特殊字符           

switch (modes) {               

case 1:                   

return 1;                   

break;               

case 2:                   

return 2;               

case 3:               

case 4:                   

return sValue.length < 12 ? 3 : 4                   

break;             }         }   

</script>

</head>

<body>   

<input type="password" value="" maxlength="16" />     <div id="tips">       

<span></span><span></span><span></span><span></span>   

</div>

</body>
时间： 2024-12-10 02:21:53

javascript 密码强度验证程序代码的相关文章

javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）_javascript技巧

前言: 密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则.现在需要升级密码强度的验证,以前的验证比较简单,现在已经不能满足需求了,现在需要可灵活变化并有多级别可配置选择的一个密码强度验证,所以就设计了下面这个东东.在设计前也参考了下比较成熟的强度规则,大同小异,不外乎都采取了打分的机制来控制密码强度规则,这样可配置性高,灵活.本来想直接拿来用的,但是发现都比较旧,有些不太适宜公司开发的需求,可能这个东西比较简单吧,所以也没什么人去更新和写新的代码,所以还是自己动手设计了规则和写了

javascript用户注册密码强度验证程序

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

javascript密码强度校验代码（两种方法）_javascript技巧

先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur

ajax 密码强度验证代码

ajax 密码强度验证代码 <script type="text/javascript" src="jquery.js"></script> <SCRIPT type=text/javascript  src="jquery.pstrength-min.1.2.js"></SCRIPT> <SCRIPT type=text/javascript> $(function() { $('.p

js密码强度实时检测代码_javascript技巧

密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条. <div class="vali_pass"> <h3>简单的密码强度检测</h3> <input type=

js密码强度验证

本款关于js 密码强度验证函数是一款根据不同强度显示不同的色来区别,下面来看看这款代码,方法很简单把用户输入的密码进行强度算一下.如果是全数字或字母的就一般,数字与字母就中等,最后更强. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmln

jquery 密码强度验证实例

  <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type"

js常用密码强度验证与大小写字母判断函数

js常用密码强度验证与大小写字母判断函数 */ function charmode(in){   if (in>=65 && in <=90) //大写字母   return 2;   if (in>=97 && in <=122) //小写   return 4;   else   return 1; //数字 } //计算出当前密码当中一共有多少种模式 function bittotal(num){   modes=0;   for (i=0;i

解读ASP.NET密码强度验证代码实例分享_实用技巧

效果如下: 输入密码:密码强度: 弱 中 强   代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//