`
lylyb
  • 浏览: 90461 次
  • 性别: Icon_minigender_1
  • 来自: 烟台
社区版块
存档分类
最新评论

JavaScript密码强度检测源代码

    博客分类:
  • JS
阅读更多
1.Body代码部分
<body>
<h4>密码强度检测</h4>
<table width="100%"  border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="100" align="right">强度显示:</td>
    <td>
<script language="javascript">
  var ps = new PasswordStrength();
  ps.setSize("200","20");
  ps.setMinLength(5);
</script>
</td>
  </tr>
  <tr>
    <td align="right">密码检测:</td>
    <td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.update(this.value);"></td>
  </tr>
</table>
</body>

2.JS代码部分

//密码强度;
function PasswordStrength(showed){
this.showed = (typeof(showed) == "boolean")?showed:true;
this.styles = new Array();
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};

this.labels= ["弱","中","强"];

this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);
this.minLen = 5;

this.width = "150px";
this.height = "16px";

this.content = "";

this.selectedIndex = 0;

this.init();
}
PasswordStrength.prototype.init = function(){
var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">';
s += '<tr>';
for(var i=0;i<3;i++){
  s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px">&nbsp;</span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>';
}
s += '</tr>';
s += '</table>';
this.content = s;
if(this.showed){
  document.write(s);
  this.copyToStyle(this.selectedIndex);
}
}
PasswordStrength.prototype.copyToObject = function(o1,o2){
for(var i in o1){
  o2[i] = o1[i];
}
}
PasswordStrength.prototype.copyToStyle = function(id){
this.selectedIndex = id;
for(var i=0;i<3;i++){
  if(i == id-1){
   this.$(this.divName+"_label_"+i).style.display = "inline";
  }else{
   this.$(this.divName+"_label_"+i).style.display = "none";
  }
}
for(var i=0;i<id;i++){
  this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);  
}
for(;i<3;i++){
  this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style);
}
}
PasswordStrength.prototype.$ = function(s){
return document.getElementById(s);
}
PasswordStrength.prototype.setSize = function(w,h){
this.width = w;
this.height = h;
}
PasswordStrength.prototype.setMinLength = function(n){
if(isNaN(n)){
  return ;
}
n = Number(n);
if(n>1){
  this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function(){
if(arguments.length == 0){
  return ;
}
for(var i=0;i<arguments.length && i < 4;i++){
  this.styles[i] = arguments[i];
}
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.write = function(s){
if(this.showed){
  return ;
}
var n = (s == 'string') ? this.$(s) : s;
if(typeof(n) != "object"){
  return ;
}
n.innerHTML = this.content;
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.update = function(s){
if(s.length < this.minLen){
  this.copyToStyle(0);
  return;
}
var ls = -1;
if (s.match(/[a-z]/ig)){
  ls++;
}
if (s.match(/[0-9]/ig)){
  ls++;
}
  if (s.match(/(.[^a-z0-9])/ig)){
  ls++;
}
if (s.length < 6 && ls > 0){
  ls--;
}
  switch(ls) {
   case 0:
    this.copyToStyle(1);
    break;
   case 1:
    this.copyToStyle(2);
    break;
   case 2:
    this.copyToStyle(3);
    break;
   default:
    this.copyToStyle(0);
  }
}


分享到:
评论

相关推荐

    javascript 密码强度测试

    在提供的压缩包文件"密码强度计算"中,可能包含了实现上述功能的源代码,你可以通过查看和分析这些代码来加深对JavaScript密码强度测试的理解。同时,动手实践编写和修改代码,会让你更加熟练地运用所学知识。记得...

    自动检测密码强度

    文件名为“demo”的压缩包可能包含了一个演示程序,这个程序展示了如何运行和测试密码强度检测功能。用户可以解压并运行这个示例,以直观地理解密码强度检测是如何工作的。这个演示可能包含测试数据,以及如何与源...

    网页设计密码强度测试

    在压缩包中的"密码强度"文件可能是实现上述功能的源代码,包括HTML、CSS和JavaScript文件。开发者可以通过阅读这些文件来理解具体的实现方式,例如,JavaScript文件中可能包含了密码强度测试的逻辑,而HTML文件则...

    密码强度代码及使用说明

    本压缩包提供了一套完整的密码强度检测代码及相关资源,帮助初学者理解并应用到自己的项目中,尤其是对于那些正在学习ASP(Active Server Pages)和JavaScript的开发者。 1. **密码强度检测原理** 密码强度检测...

    passwordStrength的密码强度检测.rar

    在IT行业中,密码强度检测是网络安全的一个重要环节。"passwordStrength的密码强度检测"这个主题主要涉及...通过分析压缩包中的源代码,我们可以深入理解这一过程,并可能学习到如何自定义和优化密码强度检测功能。

    用JavaScript验证密码的强弱源代碼

    这篇博客"用JavaScript验证密码的强弱源代码"提供了一种利用JavaScript进行密码强度检查的方法。 在网页表单中,用户输入的密码通常需要满足一定的强度要求,如长度、字符类型(大小写字母、数字、特殊字符等)的...

    passwdqc的JavaScript端口。密码密码强度检查和策略.zip

    `passwdqc` 是一个用于密码强度检测和策略实施的工具,最初是用 C 语言编写的,而"passwdqc的JavaScript端口"则是将其功能移植到了 JavaScript 语言中,使得在 Web 前端也能进行密码安全性的评估。这个压缩包文件 ...

    带视觉特效的js密码强度检测特效

    - `js` 文件夹:包含了JavaScript源代码,其中包括了密码强度检测的核心逻辑和可能用到的jQuery库。 总结来说,这个项目提供了一个使用JavaScript和jQuery实现的密码强度检测工具,通过动态图像变化向用户实时反馈...

    【JavaScript源代码】JavaScript正则验证密码强弱度的实现方法.docx

    ### JavaScript正则表达式验证密码强度的实现方法 ...本文将详细介绍如何利用JavaScript结合正则表达式来实现这一功能。...通过以上步骤,我们可以构建出一个简单但实用的密码强度检测工具,帮助用户设置更加安全的密码。

    jQuery实用密码强度检测插件passwordRulesHelper.js.zip

    《jQuery实用密码强度检测插件passwordRulesHelper.js详解》 在Web开发中,用户账户的安全性至关重要,其中密码强度的检测是确保用户安全的重要一环。jQuery作为一个轻量级、功能丰富的JavaScript库,广泛应用于...

    密码强度(web)版例子

    - 若有需求,可以集成第三方密码强度检测API,如zxcvbn库,提供更准确的评估。 综上所述,这个"密码强度(web)版例子"涉及到前端交互设计、密码强度评估算法、JavaScript编程、用户安全教育、前后端协作以及前端...

    jQuery 实时检测Input文本框的密码强度.rar

    在网页开发中,用户输入安全性是至关重要的,尤其是在涉及到密码的时候。这个名为"jQuery 实时检测Input...同时,这也是一种实用的前端技术实践,对于学习jQuery和密码强度检测机制的人来说,是一个很好的学习资源。

    基于jQuery输入密码文本框不同颜色渐变显示密码强度特效源码.zip

    该资源是一个前端开发中的代码示例,主要展示了如何利用jQuery库来实现一个具有密码强度检测功能的输入框。在用户输入密码时,文本框会根据密码的复杂度呈现出不同的颜色渐变,以此来提示用户密码的安全程度。这个...

    兼容所有游览器密码强度 js

    通常,密码强度检测会考虑因素如长度、字符种类(包括大小写字母、数字、特殊字符)、是否包含常见词汇等。 在实际应用中,这样的密码强度检测库通常会提供以下功能: 1. **实时反馈**:当用户输入密码时,它会...

    用于密码强度栏的AngularJS指令_JavaScript_HTML_下载.zip

    1. `src`: 这个目录可能包含了指令的主要源代码,包括`.js`文件,这些文件定义了指令的行为,以及可能的样式文件(`.css`)来定制视觉效果。 2. `demo`: 示例或测试页面,展示如何在实际项目中使用这个指令。通常,...

    基于jquery实现的密码强度正则表达式源码.zip

    在密码强度检测中,jQuery可以用来监听用户在密码输入框中的键入事件,实时更新密码强度指示器的状态。 正则表达式(Regular Expression)是用于匹配字符串模式的强大的工具。在这个项目中,正则表达式被用来定义...

    个人博客html+css+JavaScript完整代码

    3. **表单验证**:可以验证用户输入,如邮箱格式、密码强度等,提供即时反馈。 4. **加载更多内容**:分页加载文章,减少页面加载时间。 5. **动态加载和隐藏内容**:如评论系统,可以按需加载和显示评论。 6. **...

    roseonly模拟网站源代码

    在这个项目中,JavaScript的异步验证功能可能是对用户输入进行实时检查,如邮箱格式验证、密码强度检测等,确保数据的正确性。 最后,提到的"用户中心页"和"登录注册功能完善"意味着系统具备用户账户管理功能。用户...

    VueSimplePasswordMeter是一个简单的密码强度计组件,.zip

    VueSimplePasswordMeter是一个基于Vue.js框架的轻量级组件,专为前端开发者设计,用于在网页上实现密码强度检测功能。这个组件可以帮助用户在输入密码时实时评估密码的安全性,从而提升在线账户的安全水平。Vue.js是...

    zxcvbn密码强度估计库的Ocaml绑定_OCaml_C_下载.zip

    "ocaml-zxcvbn-master"很可能包含的是源代码仓库的主分支,可能包含以下组成部分: 1. **README**:介绍如何安装和使用绑定的文档。 2. **src**:包含 OCaml 代码,实现了zxcvbn的接口和C库的绑定。 3. **examples*...

Global site tag (gtag.js) - Google Analytics