暑期学习日记27：js实现验证码生成与检验

土肥圆波太郎

已于 2022-08-14 23:41:29 修改

阅读量344

点赞数

文章标签：学习

于 2022-08-14 22:48:51 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126337716

版权

这篇博客记录了作者在暑期学习中关于验证码生成与验证的实践过程。主要包括三个方面：1) 页面加载时自动生成随机数字验证码；2) 用户点击‘看不清’能触发验证码更新；3) 点击确认后检查输入的验证码是否与显示的相符，不符则提示错误并清空输入及刷新验证码。

摘要由CSDN通过智能技术生成

今日学习了验证码的生成与检验，逻辑为：

1.加载页面时自动随机生成数字验证码。

2.点击看不清，更换验证码重新生成验证码。

3.点击确定按钮检验输入框内的值与验证码是否相等，不相等时弹出警告并清空输入框和刷新验证码。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>验证码</title>
	<style>
		#checkcode{
			background-color:lightgray;
			color: blue;
			font-size: 30px;
		}
		#renew{
			color: blue;
			text-decoration:underline;
			cursor:pointer; 
		}
	</style>
</head>
<body>
	<div>
	<span id="checkcode">858158</span>
	<a id="renew">看不清，换一张</a>
	</div>
	<div>
	<p>验证码：<input type="text" id="inputcode"></p>
	<button id="check">确定</button>
	</div>
	<script>
		//加载时生成验证码
		window.onload=function(){
			var res=getcode();
		function getcode(){