随机生成验证码

最新推荐文章于 2020-07-20 18:56:59 发布

_ouo_

最新推荐文章于 2020-07-20 18:56:59 发布

阅读量232

点赞数

分类专栏： JavaScript html css3 文章标签： js css html

本文链接：https://blog.csdn.net/zerogf/article/details/79083943

版权

JavaScript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

html5代码如下，根据个人爱好自行设置；

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box{
width: 50%;height: 50%;border: 1px solid;margin: 40px auto;text-align: center;padding-top: 30px;
}
#code{
width: 200px;height: 50px;border: 1px solid;background: #B7C8E3;font-size: 30px;text-align: center;color: white;outline: none;cursor: pointer;
}
#input{
width: 188px;height: 50px;padding-left: 10px;outline: none;font-size: 20px;margin: 10px 0px;
}
button{
width: 200px;height: 50px;font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<input id="code" value=""/><br>
<input id="input" type="text" name="" value="" placeholder="输入验证码"><br>
<button id="check">验证</button>
</div>
<script type="text/javascript">
//生成四位的验证码

//生成随机数
function random(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
        // 数字：48~57
// 大写：65~90
// 小写：97~122
function validateCode(len){
var str="";
while (str.length<len) {
var rand=random(48,123);
if(rand>=48 && rand<=57 || rand>=65 && rand<=90 || rand>=97 && rand<=122){
rand=String.fromCharCode(rand);
str+=rand;
} 
}
return str;
}
console.log(validateCode(4));
//点击输入框随机生成验证码
document.getElementById("code").οnclick=function(){
document.getElementById("code").value=validateCode(4);
}
//验证生成与输入的验证码是否一致
document.getElementById("check").οnclick=function(){
var _input=document.getElementById("input").value;
var _code=document.getElementById("code").value;
//不区分大小写
if(_input.toUpperCase()!==_code.toUpperCase()){
document.getElementById("input").value="";
document.getElementById("input").placeholder="验证码输入错误";
}
else {
alert("正确");
}
}
</script>

</body>
</html>