利用jQuery做登录界面的验证码

时间：2021-08-19 17:11:39

主要是为了有效防止机器恶意注册，对某一个特定已注册用户用特定程序暴力破解方式进行不断的登陆尝试。验证码是现在很多网站注册/登录时必填的，

虽然对用户可能有点麻烦，但是对网站/社区来说这个功能还是很有必要，也很重要，不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。

还有在一方面会避免同一时间有大量的用户同时登入，造成信息处理缓慢

转载请以超链接形式请注明原博客出处，尊重作者，尊重原创！

废话不多说，直接上代码，里面有代码的注释，方便你的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--验证码-->
   <script language="javascript" type="text/javascript">
    
            var code;
            function createCode() {  //函数体
                code = "";
                var codeLength = 5; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
                for (var i = 0; i < codeLength; i++) 
                {
                    var charNum = Math.floor(Math.random() * 52);//设置随机产生
                    code += codeChars[charNum];
                }
                if (checkCode) 
                {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }         
         </script>
    
</head>
<style>
    /*验证码*/
.code
    {
          background-color: silver;
            font-family:Arial; /*设置字体*/
            font-style:initial;
             color:brown;
             font-size:20px;
             border:0;
              padding:2px 3px; 
             letter-spacing:3px;
             font-weight:bolder;             
             
             width:81px;
             height:23px;       
             margin-left: 120px;
             margin-top: -35px;

    }
    a
    {
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        }
    a:hover
    {
       text-decoration:underline;
        }
       .yz{
         position: absolute;
          margin-left: 220px;
          margin-top:-10px;
        }
        
</style>
<body onload="createCode()"><!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 -->
    <p>
        <label>      验证码：</label>  
         <div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz"  href="#" onclick="createCode()">看不清换一张</a> 
      </p>
      <p>
          <label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">
      </p> 
      <input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/>
      
</body>
<!--验证-->
<script>
  function GetDom(){
    if(document.getElementById("YZ").value==""){
            alert("验证码不能为空！");
            createCode();//输错一次或提交一次都将会刷新一次验证码
            return false; //结束本次会话
          }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写
            alert("您输入的验证码有误，请重新输入！！");
            createCode();//读取文件
          }                   
      else{
            alert("ok");
        }
     
  }  
</script>
</html>

　实验效果

　利用jQuery做登录界面的验证码

小礼物走一波；

 

标签：

相关文章