2021-05-24

cms内容管理系统-登陆验证码js实现方式

1.在登陆表单中增加一个input标签

<div class="form-group">
        <label class="control-label"><a href="javascrpit:;" id="d2" ><font color="green">看我不爽就换一个</font></a></label><font  id="co" size="3px" color="pink"></font> <input class="form-control"
          type="text" id="random" name="random" placeholder="请输入验证码">
      </div>

2.定义一个方法来获取字符数字验证码

function randomString(len, charSet) {
        charSet = charSet || 'ABCDEFGHJKLMNOPQRSTUVWXYZabcdefghjkmnopqrqstuvwxyz0123456789';
        var randomString = '';
        for (var i = 0; i < len; i++) {
            var randomPoz = Math.floor(Math.random() * charSet.length);
            randomString += charSet.substring(randomPoz,randomPoz+1);
        }
        return randomString;
    }

3.页面加载就要获取验证码 4表示获取4位数的验证码

$("#co").html(randomString(4, ''));

4.获取验证码 绑定事件，单击就更换验证码

$("#d2").on("click",function(){ $("#co").html(randomString(4, ''));
      })

5.给提交按钮绑定事件

$("#loginButton").click(function(){
        var ran=$("#random").val()
        var mm=$("#co").html();
        //login();
        //验证码的值正确才进行登陆验证操作
        if(ran==mm){
          login();
        } else{
          $("#loginMessage").html("<font color='red'>验证码错误</font>")
        }
      })

4.回车也要判断验证码是否正确

//绑定在整个界面都生效
      $(document).on("keypress",function(e){
        var ran=$("#random").val()
        var mm=$("#co").html();
        //login();
        //验证码的值正确才进行登陆验证操作
        if(ran==mm){
          //13对应于回车键
          if(e.keyCode==13){
            login();
          }
        } else{
          $("#loginMessage").html("<font color='red'>验证码错误</font>")
        }
        
      })

5.这样就实现了通过js获取验证码的功能