验证码——手机注册发送验证码

最新推荐文章于 2022-07-21 18:45:26 发布

无知的小菜鸡

最新推荐文章于 2022-07-21 18:45:26 发布

阅读量651

点赞数

本文链接：https://blog.csdn.net/weixin_41897680/article/details/104316742

版权

效果图：
在这里插入图片描述
**该验证码用到的两个图片:**自己从网页上保存即可

html:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/myCode.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="form">
	<div class="div-name">
		<label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" />
	</div>
	<div class="div-phone">
		<label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" />
		<a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a>
	</div>
	<div class="div-ranks">
		<label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码"  />
	</div>
	<div class="div-conform">
		<a href="javascript:;" class="conform" onclick="sends.conform();">提交</a>
	</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/myCode.js" ></script>
</body>
</html>

js:

var sends = {
	checked:1,
	send:function(){
			var numbers = /^1\d{10}$/;
			var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
			if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
				if(!numbers.test(val) || val.length ==0){
					$('.div-phone').append('<span class="error">手机格式错误</span>');
					return false;
				}
			}
			if(numbers.test(val)){
				var time = 30;
				$('.div-phone span').remove();
				function timeCountDown(){
					if(time==0){
						clearInterval(timer);
						$('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
						sends.checked = 1;
						return true;
					}
					$('.div-phone a').html(time+"S后再次发送");
					time--;
					return false;
					sends.checked = 0;
				}
				$('.div-phone a').addClass('send0').removeClass('send1');
				timeCountDown();
				var timer = setInterval(timeCountDown,1000);
			}
	}
}

css:

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	list-style: none
}

body {
	background: #EBECED;
	font-family: '微软雅黑'
}

.form {
	width: 450px;
	height: auto;
	margin: 100px auto;
	overflow: hidden;
	font-size: 16px;
	color: #1b1b1b;
	text-align: left;
	padding: 50px;
	border: 1px solid #ccc;
	border-radius: 10px;
}

.form div {
	padding: 5px 0;
	overflow: hidden;
}

.form label {
	width: 90px;
	display: block;
	float: left;
}

.form .infos {
	width: 200px;
	height: 26px;
	line-height: 26px;
	border: 1px solid #BFBFBF;
	padding: 2px;
	border-radius: 4px;
	float: left;
}

.form .div-phone a.send1 {
	height: 26px;
	text-decoration: none;
	line-height: 26px;
	padding: 2px;
	width: 80px;
	background: #AA8926;
	font-family: '宋体';
	color: #fff;
	font-size: 12px;
	text-align: center;
	display: block;
	float: left;
	border-radius: 2px;
	margin-left: 2px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.form .div-phone a.send1:hover {
	text-decoration: none;
	background: #866c1b;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.form .div-phone a.send0 {
	height: 26px;
	text-decoration: none;
	line-height: 26px;
	padding: 2px;
	width: 80px;
	background: #A1A1A1;
	font-family: '宋体';
	color: #fff;
	font-size: 12px;
	text-align: center;
	display: block;
	float: left;
	border-radius: 2px;
	margin-left: 2px;
}

.form .div-phone a.send0:hover {
	background: #A1A1A1;
	font-family: '宋体';
	color: #fff;
	font-size: 12px;
	text-decoration: none;
}

.form span.error {
	height: 26px;
	line-height: 26px;
	padding: 2px;
	width: 100px;
	color: red;
	padding-left: 20px;
	display: block;
	float: left;
	margin-left: 10px;
	font-size: 12px;
	font-family: '宋体';
	background: url(../images/error.png) no-repeat left center;
}

.form #phone {
	width: 116px;
}

.form .div-conform {
	padding-right: 153px;
}

.form .div-conform a.conform {
	width: 136px;
	height: 34px;
	display: block;
	text-align: left;
	overflow: hidden;
	background: url(../images/btn.jpg) no-repeat;
	float: right;
	text-indent: -1000px;
}

无知的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
验证码——手机注册发送验证码

效果图：**该验证码用到的两个图片:**自己从网页上保存即可html:<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="css/m...
复制链接

扫一扫