<!DOCTYPE html><html lang="en"><head> ???<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ???<title>JS实现生成随机验证码并验证功能</title> ???<style> ???????*{ margin: 0; padding: 0; } ???????.wrap{ ???????????width: 500px; ???????????margin: 20px auto; ???????} ???????#text{ ???????????height: 30px; ???????????box-sizing: border-box; ???????????vertical-align: middle; ???????????text-indent: 1em; ???????} ???????#code{ ???????????display: inline-block; ???????????width: 80px; height: 30px; ???????????background: #aaa; ???????????text-align: center; ???????????line-height: 30px; ???????????color: #fff; ???????????text-decoration: none; ???????????letter-spacing: 7px; ???????????padding-left: 7px; ???????????vertical-align: middle; ???????????font-weight: bold; ???????} ???????#btn{ ???????????width: 60px; height: 30px; ???????????outline: 0; ???????????border: #153021; ???????????background: #499990; ???????????color: #fff; ???????????border-radius: 5px; ???????} ???</style></head><body onload= "createCode()"><div class="wrap"> ???<input type="text" id="text" placeholder = "请输入验证码"> ???<a href="javascript:" id="code" onclick="createCode( this )"></a> ???<input type="button" id="btn" value="验证" onclick="validate()"></div><script> ???//功能实现 ：自动生成验证码，点击验证按钮的时候匹配字符串成功则跳转到百度失败input输入框为空，继续随机生成； ???var input = document.getElementById("text"); ???var btn = document.getElementById(‘btn‘); ???var codes = document.getElementById(‘code‘); ???var inputext=""; ???var code = ""; ???//创建验证码 ???function ?createCode() { ???????code = ""; ???????//设置验证码的个数为4个 ???????var codeLength = 4; ????????//设置验证码中科选取的数值 ???????var random = [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‘]; ????????//random一共36个字符 ???????for( var i =0 ; i<codeLength ; i++) //在random中随机去4个值出来 ???????{ ???????????//使用random() 方法可返回介于 0 ~ 1 之间的一个随机数。round() 方法可把一个数字舍入为最接近的整数。 ???????????var j =Math.round(Math.random()*36) //随机生成下标 ???????????code+=random[j]; ???????} ???????//把code随机生成的验证码放入超链接当中; ???????codes.innerHTML = code; ???} ???//获取输入框内的值 ???input.onchange = function (ev) { ????????inputext = input.value.trim().toUpperCase(); ????????//console.log(inputext); ???} ???????????//结果校验 判断输入的字符和随机生成的验证码 ???function validate() { ???????//获取输入的内容，如果输入为空，弹出警告 ???if(inputext) ???{ ?????????//检查是否相等 ???????if(inputext == code) ???????{ ???????????window.open(‘http://www.baidu.com‘,‘_self‘); ???????} ???????else { ???????????//清空输入框 ???????????input.innerHTML = ""; ???????????alert("验证码不正确，请重新输入"); ???????????//验证码在随机生成 ???????????createCode(); ???????} ???} ???else{ ???????alert("请输入验证码"); ???} ???}</script></body></html>
JS验证码
原文地址：https://www.cnblogs.com/love-life-insist/p/9069156.html