JS使用模块化实现用户名密码检测密码强弱验证验证码生成

html 页面

 用户名:<input type="text" id="username" name="">
<br>
密码:&nbsp;&nbsp;<input type="password" id="userpwd" name="">
<br>
密码强度:<span id="mm"></span><br>
验证码:<input type="text" id="yzm" name=""> 
<span id="testSpan"></span>
<br>
<input type="button" id="login" value="登录" name=""/>

JS 代码块

var module = (function() {
  var testSpan,msg,Slength,userpwd,userpwd,yzm;
    function print(msg) {alert(msg);
    } ;// 弹出消息框
  // 简单的验证码
   function createyzm(testSpan,Slength){ 
    var str = "0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
    var list = str.split("");
    for (i = 0; i < Slength; i++)
     {var index = Math.floor(Math.random() * list.length);
         testSpan.style.backgroundColor="#000";// 验证码背景颜色
         testSpan.style.color="#fff";// 验证码颜色
         testSpan.style.display="block";
          testSpan.style.textAlign ="center";
         testSpan.style.width="70px";// 长度
        testSpan.innerHTML += list[index];
      }
  return  testSpan.innerHTML;
};

function checkUserpwd(userpwd,errSpan) {var numCount = (/[0-9]/g).test(userpwd) ? 1 : 0;
        var lowCount = (/[a-z]/g).test(userpwd) ? 1 : 0;
        var uppCount = (/[A-Z]/g).test(userpwd) ? 1 : 0;// 二元运算符
        switch (numCount + lowCount + uppCount) {
            case 3:
                errSpan.innerHTML = "强";
                break;
            case 2:
                errSpan.innerHTML = "中";
                break;
            default:
                errSpan.innerHTML = "弱";
                break;
        
        return true;
    }
};
   
function check(username,userpwd){var uremeber = /^[a-zA-Z0-9_-]{4,16}$/;
    var username=username.replace("","");
    var userpwd=userpwd.replace("","");// 去空格防止 sql 注入
    if(username==""||userpwd=="")
    {print("用户名密码不能为空");
    return false;
    }
    if(!uremeber.test(username)||!uremeber.test(userpwd)){print("用户名密码为为 4 -16 位但不限于 ( 数字，字母，下划线)");
        history.go(0);// 刷新页面
        return false;
    }else  {
        //...
        return true;
    }
               
};

return {
   checkUserpwd: checkUserpwd,// 两个参数 userpwd,errSpan errspan 为提示密码强弱提示性文字，接受类型是 js dom 对象 注：jq 对象用 test 方法,
   // userpwd 为用户密码,
   check: check,// 用户名，密码，验证码
    createyzm: createyzm,//testSpan,Slength 两个参数 testSpan 是验证码 span 标签 dom 类型对象,Slength 是验证码长度
    print: print//alert 弹窗  
};

})();

var yzm=module.createyzm(document.getElementById("testSpan"),4);

document.getElementById("userpwd").onblur = function(){module.checkUserpwd(this.value,document.getElementById('mm'));
}
document.getElementById("login").onclick=function(){var a= module.check(document.getElementById("username").value,document.getElementById("userpwd").value);
if(a==true){if(document.getElementById("yzm").value==yzm){alert("登录成功！");
    }else{alert("验证码错误, 请重新输入！");
          history.go(0);// 刷新页面

        }
    }
}