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"> </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密码强度测试的理解。同时，动手实践编写和修改代码，会让你更加熟练地运用所学知识。记得...
文件名为“demo”的压缩包可能包含了一个演示程序，这个程序展示了如何运行和测试密码强度检测功能。用户可以解压并运行这个示例，以直观地理解密码强度检测是如何工作的。这个演示可能包含测试数据，以及如何与源...
在压缩包中的"密码强度"文件可能是实现上述功能的源代码，包括HTML、CSS和JavaScript文件。开发者可以通过阅读这些文件来理解具体的实现方式，例如，JavaScript文件中可能包含了密码强度测试的逻辑，而HTML文件则...
本压缩包提供了一套完整的密码强度检测代码及相关资源，帮助初学者理解并应用到自己的项目中，尤其是对于那些正在学习ASP（Active Server Pages）和JavaScript的开发者。 1. **密码强度检测原理** 密码强度检测...
在IT行业中，密码强度检测是网络安全的一个重要环节。"passwordStrength的密码强度检测"这个主题主要涉及...通过分析压缩包中的源代码，我们可以深入理解这一过程，并可能学习到如何自定义和优化密码强度检测功能。
这篇博客"用JavaScript验证密码的强弱源代码"提供了一种利用JavaScript进行密码强度检查的方法。 在网页表单中，用户输入的密码通常需要满足一定的强度要求，如长度、字符类型（大小写字母、数字、特殊字符等）的...
`passwdqc` 是一个用于密码强度检测和策略实施的工具，最初是用 C 语言编写的，而"passwdqc的JavaScript端口"则是将其功能移植到了 JavaScript 语言中，使得在 Web 前端也能进行密码安全性的评估。这个压缩包文件 ...
- `js` 文件夹：包含了JavaScript源代码，其中包括了密码强度检测的核心逻辑和可能用到的jQuery库。 总结来说，这个项目提供了一个使用JavaScript和jQuery实现的密码强度检测工具，通过动态图像变化向用户实时反馈...
### JavaScript正则表达式验证密码强度的实现方法 ...本文将详细介绍如何利用JavaScript结合正则表达式来实现这一功能。...通过以上步骤，我们可以构建出一个简单但实用的密码强度检测工具，帮助用户设置更加安全的密码。
《jQuery实用密码强度检测插件passwordRulesHelper.js详解》 在Web开发中，用户账户的安全性至关重要，其中密码强度的检测是确保用户安全的重要一环。jQuery作为一个轻量级、功能丰富的JavaScript库，广泛应用于...
- 若有需求，可以集成第三方密码强度检测API，如zxcvbn库，提供更准确的评估。 综上所述，这个"密码强度(web)版例子"涉及到前端交互设计、密码强度评估算法、JavaScript编程、用户安全教育、前后端协作以及前端...
在网页开发中，用户输入安全性是至关重要的，尤其是在涉及到密码的时候。这个名为"jQuery 实时检测Input...同时，这也是一种实用的前端技术实践，对于学习jQuery和密码强度检测机制的人来说，是一个很好的学习资源。
该资源是一个前端开发中的代码示例，主要展示了如何利用jQuery库来实现一个具有密码强度检测功能的输入框。在用户输入密码时，文本框会根据密码的复杂度呈现出不同的颜色渐变，以此来提示用户密码的安全程度。这个...
通常，密码强度检测会考虑因素如长度、字符种类（包括大小写字母、数字、特殊字符）、是否包含常见词汇等。 在实际应用中，这样的密码强度检测库通常会提供以下功能： 1. **实时反馈**：当用户输入密码时，它会...
1. `src`: 这个目录可能包含了指令的主要源代码，包括`.js`文件，这些文件定义了指令的行为，以及可能的样式文件（`.css`）来定制视觉效果。 2. `demo`: 示例或测试页面，展示如何在实际项目中使用这个指令。通常，...
在密码强度检测中，jQuery可以用来监听用户在密码输入框中的键入事件，实时更新密码强度指示器的状态。 正则表达式（Regular Expression）是用于匹配字符串模式的强大的工具。在这个项目中，正则表达式被用来定义...
3. **表单验证**：可以验证用户输入，如邮箱格式、密码强度等，提供即时反馈。 4. **加载更多内容**：分页加载文章，减少页面加载时间。 5. **动态加载和隐藏内容**：如评论系统，可以按需加载和显示评论。 6. **...
在这个项目中，JavaScript的异步验证功能可能是对用户输入进行实时检查，如邮箱格式验证、密码强度检测等，确保数据的正确性。 最后，提到的"用户中心页"和"登录注册功能完善"意味着系统具备用户账户管理功能。用户...
VueSimplePasswordMeter是一个基于Vue.js框架的轻量级组件，专为前端开发者设计，用于在网页上实现密码强度检测功能。这个组件可以帮助用户在输入密码时实时评估密码的安全性，从而提升在线账户的安全水平。Vue.js是...
"ocaml-zxcvbn-master"很可能包含的是源代码仓库的主分支，可能包含以下组成部分： 1. **README**：介绍如何安装和使用绑定的文档。 2. **src**：包含 OCaml 代码，实现了zxcvbn的接口和C库的绑定。 3. **examples*...