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*...