js实现网页验证码功能

最新推荐文章于 2023-09-01 17:19:52 发布

想流浪的姑娘

最新推荐文章于 2023-09-01 17:19:52 发布

阅读量1.3k

点赞数

分类专栏： web前端小知识

本文链接：https://blog.csdn.net/sakura_momoko/article/details/52860253

版权

web前端小知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html部分代码：

  
  <html>      
<head>      
<script language = "javascript" src = "code.js"></script>      
<link rel="stylesheet" type="text/css" href="code.css">      
</head>      
<body onload="createCode();">      
<form>      
<center>验证码：<input type="text" id="input1" />      
<input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">换一张</a>      
<input id="Button1" onclick="validate();" type="button" value="确定" /></center>      
</form>      
</body>      
</html>

css部分代码：

  
  .code{      
    background-image:url(w1.jpg);      
    font-family:Arial;      
    font-style:italic;      
    color:Red;      
    border:0;      
    padding:2px 3px;      
    letter-spacing:3px;      
    font-weight:bolder;      
}

js部分代码（包含验证）：

  
  var code ; //在全局 定义验证码      
function createCode(){       
    code = "";      
    var codeLength = 4;//验证码的长度      
    var checkCode = document.getElementById("checkCode");      
    checkCode.value = "";      
    var selectChar = new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','j','k','l','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');      
      
    for(var i=0;i<codeLength;i++) {      
        var charIndex = Math.floor(Math.random()*60);      
        code +=selectChar[charIndex];      
    }      
    if(code.length != codeLength){
        createCode();      
    }      
    checkCode.value = code;      
}      
      
     
function validate () {      
    var inputCode = document.getElementById("input1").value.toUpperCase();      
    var codeToUp=code.toUpperCase();  
    if(inputCode.length <=0) {      
        alert("请输入验证码！");      
        return false;      
    }      
    else if(inputCode != codeToUp ){      
        alert("验证码输入错误！");      
        createCode();      
        return false;      
    }      
    else {      
        alert("输入正确，输入的验证码为："+inputCode);      
        return true;      
    }         
}

注意：①需要在body中加上：onload="createCode();"，否则第一次无法加载出验证码；

②Math.random() 生成0和1之间的随机小数

Math.random() * 7 生成0和7之间的随机小数

Math.random() * 7 + 1生成0和8之间的随机小数

Math.floor(Math.random() * 7 + 1)生成0和8之间的随机整数,注意是整数，不是小数；

想流浪的姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现网页验证码功能

html部分代码： language = "javascript" src = "code.js"> rel="stylesheet" type="text/css" href="code.css"> onload="createCode();"> 验证码： type="text" id="input1" /
复制链接

扫一扫