JS验证密码强度 JS正则表达式验证密码强度

时间:2021-04-21 夏沐_lk 人气:0

代码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;
 }
 .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) {
 return document.getElementById(id);
}

加载全部内容