手机短信校验(前端js)

1、页面发送短信验证码的表单

<div class="form-group"><div><input type="text"  id="phone" class="form-control" placeholder="请输入手机号码"></div><div style="justify-content:flex-end;display: flex;"><button type="button" class="btn btn-info"  id="send">点击获取验证码</button></div>
</div><div class="form-group"><input type="text" name="securityCode" class="form-control"  placeholder="请输入验证码">
</div>

2、发送短信验证码的JS

<script type="text/javascript">$("#send").click(function (){sendMsg($("#send"));});//用ajax提交到后台的发送短信接口function sendMsg(obj){var phone = $("#phone").val();var result = isPhoneNum();if(result) {$.ajax({url:"http://127.0.0.1:8888/sendMsg",data:{phone:phone},dataType:"json",type:"post",async : false,cache : false,success:function(res){if(res){alert("验证码发送成功");}},error:function(){alert("验证码发送失败");}})//开始倒计时setTime(obj);}}//设置60s倒计时实现逻辑var countdown = 60;function setTime(obj) {if (countdown == 0) {obj.prop('disabled', false);obj.text("点击获取验证码");//60秒过后button上的文字初始化,计时器初始化;countdown = 60;return;} else {obj.prop('disabled', true);obj.text("("+countdown+"s)后重新发送");countdown--;}//每1000毫秒执行一次setTimeout(function() { setTime(obj) },1000);}//校验手机号是否合法function isPhoneNum(){var phonenum = $("#phone").val();//正则校验var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;if(!reg.test(phonenum)){alert('请输入有效的手机号码！');return false;}else{return true;}}</script>

3、后台接口随机生成验证码,调用第三方短信服务商接口发送短信,然后将验证码返回前端,用于前端校验对比即可。

手机短信校验(前端js)相关推荐

发送手机短信验证码-后端、前端(验证码倒计时)
获取手机短信验证码-后端.前端(验证码倒计时) 后端 /*** 发送手机短信验证码** @return str* @throws Exception* @author 王永圣*/@RequestMap ...
Vue与Node.js实现手机短信验证登录
手机短信使用的第三方平台是联容云,注册就送8块钱体验费,足够自己用用了,注册完自己建一个应用就能拿到需要使用的配置了,如图注册完之后1就可以使用了. Node.js后端使用了Express框架 &q ...
基于阿里云的手机短信验证码和注册校验逻辑
基于阿里云的手机短信验证码demo实现 1. 环境依赖 2. 页面表单 html 3. 校验与短信 js 4. 工具类 SmsUtils 5. 资源调用 Servlet 阿里云的短信平台:http:/ ...
手机网站实现一键拨号及html5短信发送功能JS代码(微信适用)
手机网站实现一键拨号及html5短信发送功能JS代码(微信适用) 来源:本站原创作者:温州中网网络营销机构发布时间:2014-1-10 10:45:44 点击数:3069 微信微 ...
Java用户注册手机短信验证码校验功能实现
验证用户提交的手机短信验证码,如果验证码错误就跳回到当前页面.在短信验证码未填写或未正确填写时,就关闭底下注册按钮的功能,只有短信验证码通过校验后才打开注册按钮的功能.第二种方式是所有输入项全部填写完 ...
Flask项目实战——6—(前台用户模型、前台登录注册、图形验证码、手机短信验证码、添加表单验证短信验证码请求)
1.前台用户模型前台用户模型定义创建前台模型文件 apps/front/models.py # -*- encoding: utf-8 -*- """ @File : ...
H5学习之路-手机短信验证码的实现
在上一篇博文中,给大家介绍了图片验证码的实现,今天再给大家介绍一下手机短信验证码的实现.其实,这个和图片验证码差不多,只不过要把后天生成的验证码发到对应的手机号码上,然后再进行验证.这里,关于发短信的 ...
瑞吉外卖项目中手机短信验证登录的问题及过程处理
瑞吉外卖中手机短信验证码登陆的问题以及过程整理本篇接上一篇文章: <基于SpringBoot+MybatisPlus开发的外卖管理项目>戳戳戳 http://t.csdn.cn/cRJY ...
java手机短信验证，并存入redis中，验证码时效5分钟
目录 1.注册发送短信账号一个账号 2.打开虚拟机,将redis服务端打开 3.创建springboot工程,导入相关依赖 4.写yml配置 5.创建controller层,并创建controller ...
Atitit. 破解拦截绕过网站手机短信验证码方式 v2 attilax 总结
Atitit. 破解拦截绕过网站手机短信验证码方式 v2 attilax 总结 1. 验证码的前世今生1 1.1. 第一代验证码图片验证码1 1.2. 第二代验证码用户操作 , ...

手机短信校验(前端js)

手机短信校验(前端js)相关推荐

最新文章

热门文章