JavaScript如何实现注册时密码强度校验
- 发布时间：
- 作者：码农之家
- 点击：197
这篇文章主要知识点是关于js、密码强度校验、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
JavaScript注册时密码强度校验代码
密码强度有4个状态，分别如下图。
无密码状态
密码低级状态
密码中级状态
密码高级状态
实现的代码主要如下：
HTML代码
<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)"> <table border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td id="pwd_Weak" class="pwd pwd_c"> </td> <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td> <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td> </tr> </table>
CSS代码
.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;}
.pwd_f{color:#BBBBBB;}
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}
.pwd_c_r{border-right:1px solid #D0D0D0;}
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;}
.pwd_Medium_c_r{border-right:1px solid #E9AE10;}
.pwd_Strong_c_r{border-right:1px solid #267A12;}
JS代码
function CheckIntensity(pwd) {
var Mcolor, Wcolor, Scolor, Color_Html;
var m = 0;
//匹配数字
if (/\d+/.test(pwd)) {
debugger;
m++;
};
//匹配字母
if (/[A-Za-z]+/.test(pwd)) {
m++;
};
//匹配除数字字母外的特殊符号
if (/[^0-9a-zA-Z]+/.test(pwd)) {
m++;
};
if (pwd.length <= 6) { m = 1; }
if (pwd.length <= 0) { m = 0; }
switch (m) {
case 1:
Wcolor = "pwd pwd_Weak_c";
Mcolor = "pwd pwd_c";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "弱";
break;
case 2:
Wcolor = "pwd pwd_Medium_c";
Mcolor = "pwd pwd_Medium_c";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "中";
break;
case 3:
Wcolor = "pwd pwd_Strong_c";
Mcolor = "pwd pwd_Strong_c";
Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";
Color_Html = "强";
break;
default:
Wcolor = "pwd pwd_c";
Mcolor = "pwd pwd_c pwd_f";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "无";
break;
}
document.getElementById('pwd_Weak').className = Wcolor;
document.getElementById('pwd_Medium').className = Mcolor;
document.getElementById('pwd_Strong').className = Scolor;
document.getElementById('pwd_Medium').innerHTML = Color_Html;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
javascript 相关电子书
学习笔记
<
1
>
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很强……
js正则表达式验证密码强度【推荐】
效果图： 代码如下： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title验证密码强度/title style type="text/css" *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;} #strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;} .lv1{background:red;} .lv2{background:blue;width:200px;} .lv3{background:green;width:300px;} /style/headbody div id="demo" label for="ipt"密码：/label input type="text" id="ipt"br/ em密码强度：/emem id="strength"/em div id="strength_length"/div /div/bodyscript type="text/javascript" (function(window){ function $(id){ return document.getElementById(id); }; var arr = ["","低","中","高"]; // 获取对象 var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length"); // 密码输入事件 ipt.onkeyup = function(){ var s = 0; var txt = this.value; if( /[a-zA-Z]/.test(txt) ){ s++; }; if( /[0-9]/.test(t……
JS基于正则表达式实现的密码强度验证功能示例
本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlewww.jb51.net 码农之家/title/headstyle type="text/css" body { background: #ccc; } label { width: 40px; display: inline-block; } span { color: red; } .container { margin: 100px auto; width: 400px; padding: 50px; line-height: 40px; border: 1px solid #999; background: #efefef; } span { margin-left: 30px; font-size: 12px; } .wrong { color: red } .right { color: green; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; }/stylebody……