资讯专栏INFORMATION COLUMN

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

kelvinlee / 524人阅读

摘要:页面用户名密码密码强度验证码登录代码块弹出消息框简单的验证码验证码背景颜色验证码颜色长度二元运算符强中弱去空格防止注入用户名密码不能为空用户名密码为为位但不限于数字,字母,下划线刷新页面两个参数为提示密码强弱提示性文字,接受

html 页面
用户名:

密码:  
密码强度:
验证码:
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);//刷新页面

        }
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105126.html

相关文章

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

    摘要:页面用户名密码密码强度验证码登录代码块弹出消息框简单的验证码验证码背景颜色验证码颜色长度二元运算符强中弱去空格防止注入用户名密码不能为空用户名密码为为位但不限于数字,字母,下划线刷新页面两个参数为提示密码强弱提示性文字,接受 html 页面 用户名: 密码: 密码强度: 验证码: JS代码块 var module = (function() { var testSpan...

    Jacendfeng 评论0 收藏0
  • JS使用块化实现户名检测强弱验证验证生成

    摘要:页面用户名密码密码强度验证码登录代码块弹出消息框简单的验证码验证码背景颜色验证码颜色长度二元运算符强中弱去空格防止注入用户名密码不能为空用户名密码为为位但不限于数字,字母,下划线刷新页面两个参数为提示密码强弱提示性文字,接受 html 页面 用户名: 密码: 密码强度: 验证码: JS代码块 var module = (function() { var testSpan...

    RobinTang 评论0 收藏0
  • 聊聊毕业设计系列 --- 系统实现

    摘要:七牛云接入本系统的图片,音视频是放在七牛云,所以需要接入七牛云。在服务端通过接口请求来获取七牛云上传,客户端获取到七牛云,通过不同方案将带上。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...

    null1145 评论0 收藏0
  • 聊聊毕业设计系列 --- 系统实现

    摘要:七牛云接入本系统的图片,音视频是放在七牛云,所以需要接入七牛云。在服务端通过接口请求来获取七牛云上传,客户端获取到七牛云,通过不同方案将带上。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...

    qpal 评论0 收藏0
  • 聊聊毕业设计系列 --- 系统实现

    摘要:七牛云接入本系统的图片,音视频是放在七牛云,所以需要接入七牛云。在服务端通过接口请求来获取七牛云上传,客户端获取到七牛云,通过不同方案将带上。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...

    sanyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<