2022年10月15号之JavaScript验证码

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、验证码页面
• 二、验证码逻辑
  • 1.引入库
• 总结

---

前言

javaScript验证码

---

一、生成验证码

<div>
		<div>
			<span id="checkCode">adf34y</span>
			<a id="linkbt">看不清换一张</a>
		</div>
		<div>
			<label>验证码：</label>
			<input type="text" id="inputCode">
			<span id="text_show"></span>
		</div>
		<input type="button" id="Button1" value="确定">
</div>

二、使用步骤

1.引入库

代码如下：

window.onload = function() {
			let res =getCode();
			function getCode() {
				let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
				let str = '';
				for(let i = 0;i<6;i++) {
				let num = Math.round(Math.random()*(15-0)+0);
				str += arr[num];
			}
			return str;
		}
		document.getElementById('checkCode').innerText = res;
		document.getElementById('linkbt').onclick = function(){
			// 点击事件
			document.getElementById('checkCode').innerText = getCode();
		}


		// 提交进行对比
		document.getElementById('Button1').onclick = function(){
			let code = document.getElementById('checkCode').innerText;
			let inputCode = document.getElementById('inputCode').value;
			if (code != inputCode) {
				alert('您输入的验证码不正确');
				document.getElementById('inputCode').value = ''
				return false;
			}
		}
	}

总结

这是个简单的js验证码功能，生成验证码逻辑：6位数，0-9；a-f；随机生成