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

最新推荐文章于 2024-01-22 13:24:22 发布

_眉目如初

最新推荐文章于 2024-01-22 13:24:22 发布

阅读量1.5k

点赞数 7

分类专栏： js 文章标签： html js

本文链接：https://blog.csdn.net/Q378532364/article/details/91576031

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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);//刷新页面

}
}

}