前端手机号验证以及发送验证码倒计时

最新推荐文章于 2024-05-22 10:11:16 发布
最新推荐文章于 2024-05-22 10:11:16 发布
阅读量858 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dabao87/article/details/85274117
版权 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    	<!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
    	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<title>账号绑定</title>
		<link rel="stylesheet" href="/assets/p-default/layui/css/layui.css" />
		<script src="/assets/p-default/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/assets/p-default/js/loading.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var width = $(window).width();
				$('span.line-dashed').css({'width':width});
				$('span.line-b').css({'width':width});
				
			})
		</script>
		
		<style>
			body{background: url('/assets/p-default/images/wxpublic/background.png') no-repeat;background-size:100%;}
			/*body,html{width:100%;height:100%;}*/
			input{border:none;width:100%;}
			#title{height:50px;line-height: 50px;}
			span.line-b{border-top:1px solid #000;height:1px;display: block;margin-left:-15px;}
			.layui-mt20{margin-top:20px;}
			span.line-dashed{border-top:1px dashed gray;display: block;height:1px;margin-left:-15px;}
			.input{width:90%;height:30px;border:1px solid #000;text-indent: 10px;font-size: 18px;}
			.phone{height:30px;border:1px solid #000;text-indent: 10px;font-size: 18px;}
			.layui-mb10{margin-bottom: 10px;}
			.center{text-align: center;}
			.account{line-height: 40px;font-size: 20px;color:#fff;}
			.thiswx{line-height: 38px;}
			.nickname,.userid,.phone,.verifycode{font-size: 16px;line-height: 40px;height:40px;}
			.top{margin-top:50px;}
			.layui-mt30{margin-top:30px;}
			.whatid{color:#E69806;text-decoration:underline;line-height: 70px;font-size: 17px;white-space:nowrap;}
			.verifycodebtn{display:block;width:110px;height:40px;line-height: 40px;text-align: center;font-size: 16px;background: #0000FF;color:#fff;}
			a:hover{color:#fff;}
		</style>
		
	</head>
	<body>
		<div class="layui-container top">
			<div class="logo" style="margin-bottom:70px;" align="center"><img src="/assets/p-default/images/wxpublic/logo.png" alt="" style="width:80%;" /></div>
			<div class="layui-row">
			    <div class="layui-row">
				    <div class="layui-col-xs3">
				      	<p class="account">ID</p>
				    </div>
				    <div class="layui-col-xs5">
				      	<input type="text" class="input accounts userid" placeholder="请输入ID" maxlength="7" onkeyup="value=value.replace(/[^\d]/g,'')" value="<?php echo $userid?>"/>
				    </div>
				    <div class="layui-col-xs4">
				      	<a href="javascript:;" class="whatid">什么是ID?</a>
				    </div>
			    </div>
			    <div class="layui-row">
				    <div class="layui-col-xs3">
				      	<p class="account">手机号</p>
				    </div>
				    <div class="layui-col-xs8 phonewidth">
				      	<input type="text" class="phone" placeholder="请输入手机号" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
				    </div>
			    </div>
			    <div class="layui-row layui-mt30">
				    <div class="layui-col-xs3">
				      	<p class="account">验证码</p>
				    </div>
				    <div class="layui-col-xs8">
				    	<div class="layui-row">
						    <div class="layui-col-xs7 codewidth">
						      	<input type="text" class="input verifycode" placeholder="请输入验证码" style="font-size: 16px;"/>
						    </div>
						    <div class="layui-col-xs5">
								<input type="button" value="获取验证码" id="send_sms" class="verifycodebtn">
									<!--获取验证码</a>-->
						    </div>
					    </div>
				    </div>
			    </div>
			    <div class="layui-row layui-mt20">
				    <div class="layui-col-xs12 center">
				      	<button class="layui-btn sure" style="background: #EF9C00;width:200px;height:50px;font-size: 22px;margin-top:20px;">确&nbsp;&nbsp;&nbsp;定</button>
				    </div>
			    </div>
			</div>
		</div>
	</body>
</html>
	
<script type="text/javascript" src="/assets/p-default/layer/layer.js"></script>
<script type="text/javascript">
	
	
	
	
$(function(){
	var check_id = 0;
	var check_phone = 0;
	var check_sms = 0;
	var countdown = 60;
	
	
	//	填写ID
	$('.userid').bind('input propertychange focus', function() {
		var reg = new RegExp("^[0-9]*$");
		var userid = $(this).val();
		if(!reg.test($(this).val())){
			layer.msg('只能输入数字');
			return false;
		}else if(userid.length  == 7){
			$.get('/weixinapi/checkUserid/?userid='+userid,function(data){
				if(data == 1){
					layer.msg('该用户不存在',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 2){
					layer.msg('该ID已经使用',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 3){
					layer.msg('ID必须为数字',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 4){
					layer.msg('请填写7位ID',{area: ['auto', 'auto'],offset : ['150px','']});
				}else{
					check_id = 1;
				}
			})
		}
		
	});
	
//	判断userid是不是7位数字
	$('.userid').blur(function(){
		var reg = new RegExp("^[0-9]*$");
		var userid = $(this).val();
		if(!reg.test($(this).val()) || userid.length != 7){
			layer.msg('请填写7位ID',{area: ['auto', 'auto'],offset : ['150px','']});
		}else{
			check_id = 1;
		}
	})
	
//	填写手机号
	$('.phone').bind('input propertychange focus', function() {
		var reg = new RegExp("^[0-9]*$");
		var cek = /^1((3|4|5|7|8){1}\d{1})\d{8}$/;
		var phone = $(this).val();
		if(!reg.test($(this).val())){
			layer.msg('只能输入数字',{area: ['auto', 'auto'],offset : ['150px','']});
		}else if(phone.length  == 11 && !cek.test($(this).val())){
			layer.msg('请正确填写手机号',{area: ['auto', 'auto'],offset : ['150px','']});
		}else if(phone.length  == 11 && cek.test($(this).val())){
			$.get('/weixinapi/checkPhone/?phone='+phone,function(data){
				if(data == 2){
					layer.msg('该手机号已经绑定',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 3){
					layer.msg('手机号必须为数字',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 4){
					layer.msg('请正确填写手机号',{area: ['auto', 'auto'],offset : ['150px','']});
				}else{
					check_phone = 1;
				}
			});
		}
	});

//	判断手机号是不是11位数字和数字
	$('.phone').blur(function(){
		var reg = new RegExp("^[0-9]*$");
		var cek = /^1((3|4|5|7|8){1}\d{1})\d{8}$/;
		var phone = $(this).val();
		if(!reg.test($(this).val()) || phone.length != 11 || !cek.test($(this).val())){
			layer.msg('请正确填写手机号',{area: ['auto', 'auto'],offset : ['150px','']});
			return false;
		}else{
			check_phone = 1;
		}
	})
	
	
//	发送验证码
	function sendSms(val) {
		if (countdown == 0) {
			val.removeAttr("disabled");
			val.val("获取验证码");
			countdown = 60;
			return;
		} else {
			val.attr("disabled", true);
			val.val(countdown);
			countdown--;
		}
		setTimeout(function () {
			sendSms(val)
		}, 1000)
	}
	
	
//  发送手机验证码
    $('.verifycodebtn').click(function(){
        if(!check_phone){
            layer.msg('请正确填写手机号',{area: ['auto', 'auto'],offset : ['150px','']});
            return false;
        }else{
            var val = $(this);
            var phone = $('.phone').val();
            $.get('/weixinapi/sendsms/?uid=0&phone='+phone+'&time=<?php echo $time; ?>&token=<?php echo $token; ?>',function(data){
//              data = JSON.parse(data)
                if(data == 1){
                    sendSms(val);
                    layer.msg('短信发送成功',{area: ['auto', 'auto'],offset : ['150px','']});
                }else{
                    layer.msg('短信发送失败',{area: ['auto', 'auto'],offset : ['150px','']});
                }
            });
        }
    });

    //验证手机验证码
    $('.verifycode').bind('input propertychange focus', function() {
		var reg = new RegExp("^[0-9]*$");
		var code = $(this).val();
		
		if(code != '' && reg.test($(this).val()) && code.length == 4){
			$.get('/weixinapi/checksms/?uid='+$('.userid').val()+'&code='+code+'&phone='+$('.phone').val(),function(data){
//              data = JSON.parse(data);
				if(data == 0){
					layer.msg('验证码错误',{area: ['auto', 'auto'],offset : ['150px','']});
					check_sms = 0;
				}else if(data == 1){
					check_sms = 1;
				}
			});
		}
	});
	
	
	//提示框
	$('.whatid').click(function(){
		var width = $(window).width();
		vipRightPop(width);
	});
	function vipRightPop(width){
        var h = '<div class="pop_wrap_con clearfix">';
        	h += '<img src="/wxpublic/tip.png" style="width:100%;">';
            h += '</div>';

        layer.open({
            type: 1,
            title: false,
            skin: 'layui-layer-rim',
            area: [width*0.9+'px', ''],
            offset: '150px',
            content: h,
            shadeClose: false,
            closeBtn: 1
        });
    }
    
    
    
    //	点击确认绑定按钮
	var tiemer = "";
    var time = 3000;//每次点击三秒后才能再次点击
    var fun = function Click(){
		if(check_sms == 1 && check_phone == 1 && check_id == 1){
			$.get('/weixinapi/bindphone/?userid='+$('.userid').val()+'&code='+$('.verifycode').val()+'&phone='+$('.phone').val(),function(data){
				if(data == 1){
					layer.msg('没有该ID',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 2){
					layer.msg('该ID已经使用',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 3){
					layer.msg('该手机号已经使用',{area: ['auto', 'auto'],offset : ['150px','']});
				}else if(data == 4){
					window.location.href='http://<?php echo $_SERVER['HTTP_HOST']?>/weixinapi/bindmobilesuccess?userid='+$('.userid').val()+'&phone='+$('.phone').val();
				}
			});
		}
        $(".sure").unbind("click");
        tiemer = setTimeout(function(){
            $(".sure").click(fun);
        },time);
    };
    $(".sure").click(fun);
    clearTimeout(tiemer);

})



</script>

 

dabao87
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
发送验证码倒计时
m0_58654936的博客
08-10 1796
前端后端 实现验证码倒计时逻辑
【JavaScript】手机验证码倒计时
Jessieeeeeee的博客
09-01 1121
手机验证码倒计时
实现手机验证码获取及倒计时功能
最新发布
m0_54340021的博客
05-22 617
本文介绍了两种实现手机验证码获取及倒计时功能的方法，适用于Web和移动应用的用户身份验证环节。两种实现都包含了详细的代码示例和注释，以帮助开发者理解并快速集成到自己的项目中。文章最后强调了在实际开发中需要与后端服务进行集成和安全校验的重要性，以确保验证码功能的安全性和有效性。
前端验证码倒计时的实现（实战）
Sunday97的博客
09-07 2442
是用vue写的，但是逻辑基本上都是一样的。 效果如下： 验证码倒计时： codeTimer() { this.timer = 60; let _this = this;//setTimeout里面的this不一样,所以在这里先保存好 if (this.timer >= 1) { //this.$refs.eleCode是vue获取dom元素的一种方法 this.$refs.eleCode.setAttribut
手机号码注册带正则验证和发验证码倒计时
weixin_34087503的博客
12-19 167
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #btn { width: 150px; ...
验证手机号和设置60秒的倒计时
weixin_30732487的博客
04-03 225
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" ...
jQuery表单验证与表单美化手机发送验证码倒计时插件
08-31
在描述中的插件可能包含了针对手机号码的验证，以及发送验证码前的验证逻辑。 接着，**表单美化** 是提升用户体验的关键。通过CSS（如压缩包中的`zzsc.css`），我们可以定制表单元素的样式，包括边框、背景色、字体...
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
12-28
废话不多说直接上代码 ... <form method=post id=form_hroizon enctype=multipart/form-data action=/> <input type=hidden name=phoneTemplet id=phoneTemplet> <input type=hidden name=regType id=...
jQuery手机发送验证码倒计时代码.zip
11-22
在这个示例中，jQuery可能被用来选择和操作HTML元素，如找到手机号输入框和发送验证码的按钮，绑定点击事件，以及更新倒计时显示。jQuery的`.click()`方法用于绑定点击事件，`.text()`方法用于获取或设置元素的文本...
jQuery手机号码获取验证码60秒倒计时表单代码
01-01
3. **手机号码验证**：在前端，可能有简单的正则表达式验证手机号码格式是否正确，如11位数字组成。但真正的验证通常在后端完成，防止恶意输入。 4. **AJAX**：当用户点击获取验证码按钮，jQuery使用AJAX异步技术向...
WEB开发之注册页面验证码倒计时代码的实现
08-31
当用户点击获取验证码，前端会向`/auth/getValidCode`发送请求，后端接收到请求后，应该验证手机号的有效性，并通过某种方式（如短信或邮件）将验证码发送到用户设备。 注册接口`/auth/register`则在用户提交完整...
前端Vue实现手机号验证码登录（60s禁用倒计时）
Lguorong的博客
08-18 4465
这篇文章主要介绍了Vue实现手机号验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，具有很好的参考价值，感兴趣的朋友可以了解下。最近做了个vue项目，前端通过手机号验证码的方式登录，获取验证码的按钮需要倒计时，点击一次之后，60秒内不能再次点击。输入正确格式的手机号码后，“获取验证码” 按钮方可点击；...
js获取手机验证码倒计时的实现
Corey
04-09 1313
方案一&lt;div class="div user-input"&gt; &lt;input type="number" class="code" name="verify" placeholder="请输入手机验证码" required maxlength="6"&gt; &lt;input type="button&q
js实现手机验证码发送倒计时60秒无视页面刷新
kwc1314的博客
01-22 2670
pageEncoding="UTF-8"%> Document src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"> --> --> 找回密码 --> style="backgrou
利用手机号登录获取手机验证码
算法与编程之美
07-29 5976
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！问题描述手机号...
jquery 手机号验证码倒计时
cherish_all的博客
09-22 326
html<input type="button" onclick="settime(this)" value="免费获取验证码">jsvar countdown=60; function settime(obj){ if(countdown==0){ obj.removeAttribute("disabled"); obj.value="免费获取验证码"; count
按钮发送验证码后显示倒计时
范天缘的博客
11-03 4481
业务中经常会碰到发送验证码以后 按钮变成倒计时状态且不可发送验证码 倒计时变为0的时候 可已重新点击发送验证码 下面是具体验证码的代码 首先在data定义一下 变量 然后在点击按钮的事件里面加上 验证的代码就行了 ...
[微信小程序] 输入手机号发送验证码 实现【60s】倒计时功能
weixin_41883384的博客
07-20 3550
1.效果图 2、页面仅仅利用了JS的相关功能，包含：wxml、js、wxss  2.1wxml页面代码： 2.2 js页面代码： 2.3 wxss页面代码：   3、上面讲的是微信小程序的，那么我们一般web端或者移动端的应该是什么样呢？ 其实，方法都差不多，这里也贴出来仅供大家参考    温馨提示：          截图是为了让自己 改掉  复制粘贴的坏...
常见效果整理——移动端获取验证码倒计时
五月_的博客
04-09 703
一、点击button，执行倒计时方法 $('.gold-sun-vecode-btn').click(function(){ time(60, $(this)) prompt('验证码已发送') $(this).off('click') }) // 发送验证码倒计时 function time(wait, o) { ...
使用Jquery发送验证码倒计时60秒限制
06-09
好的，以下是一个简单的示例代码，可以使用jQuery发送验证码并倒计时60秒： HTML: ```html 请输入手机号码"/> 获取验证码 ``` JavaScript: ```javascript $(document).ready(function() { var count = 60; //倒...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值