JS正则表达式验证密码强度本⽂实例为⼤家分享了JS正则表达式验证密码强度的具体代码，供⼤家参考，具体内容如下代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:300px;
top:100px;
}
.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;
}
</style>
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16"><!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="common.js"></script>
<script>
/
*
*
* 密码: 数字，字母，特殊符号
*
* 密码: 只有数字- 或者是只有字母，或者是只有特殊符号---1级---弱
* 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号  -----2级----中
* 三者都有: 数字和字母和特殊符号------3级-----强
*
* */
//获取⽂本框注册键盘抬起事件
my$("pwd").onkeyup=function () {
/
/每次键盘抬起都要获取⽂本框中的内容，验证⽂本框中有什么东西，得到⼀个级别，然后下⾯的div显⽰对应的颜⾊  //如果密码的长度是⼩于6的，没有必要判断
if(this.value.length>=6){
var lvl=getLvl(this.value);
if(lvl==1){
//弱
my$("strengthLevel").className="strengthLv1";
}else if(lvl==2){
my$("strengthLevel").className="strengthLv2";
}else if(lvl==3){
my$("strengthLevel").className="strengthLv3";
}else{
my$("strengthLevel").className="strengthLv0";
}
}else{
my$("strengthLevel").className="strengthLv0";
}
};
//给我密码，我返回对应的级别
function getLvl(pwd) {
var lvl=0;//默认是0级
//密码中是否有数字，或者是字母，或者是特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;//1 3
}
</script>
</body>
</html>
优化代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:300px;
top:100px;
}
js正则表达式判断数字
.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;
}
</style>
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16"><!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取⽂本框注册键盘抬起事件
my$("pwd").onkeyup=function () {
//每次键盘抬起都要获取⽂本框中的内容，验证⽂本框中有什么东西，得到⼀个级别，然后下⾯的div显⽰对应的颜⾊  //如果密码的长度是⼩于6的，没有必要判断
//  if(this.value.length>=6){
//  var lvl= getLvl(this.value);
//  my$("strengthLevel").className="strengthLv"+lvl;
//  }else{
//  my$("strengthLevel").className="strengthLv0";
//  }
my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
//给我密码，我返回对应的级别
function getLvl(pwd) {
var lvl=0;//默认是0级
//密码中是否有数字，或者是字母，或者是特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;//最⼩的值是1，最⼤值是3
}
</script>
</body>
</html>
common.js
/**
* 获取指定标签对象
* @param id 标签的id属性值
* @returns {Element}根据id属性值返回指定标签对象
*/
function my$(id) {
ElementById(id);
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。