1、html代码

<ul class="login-from"><li class="flexbox flexbox-middle" ><input type="tel" class="ipt flexchild" id="tel" maxlength="11" placeholder="请输入您的联系方式" /></li><li class="flexbox flexbox-middle"><input id="dyncode" type="text" maxlength="4" class="ipt flexchild" placeholder="请输入图形验证码" /><img id="dyncodeimg" class="code-img" src="{:U('getDynamicCode')}" οnclick="javascript:this.src = '{:U('getDynamicCode')}?tm=' + Math.random();"></li><li class="flexbox flexbox-middle"><input id="VerifyCode" type="text" maxlength="6" class="ipt VerifyCode" placeholder="请输入短信验证码" /><input id="getVerifyCode" type="text" class="getVerifyCode" value="点击获取"></li></ul>

js验证

//手机号码验证if(document.getElementById("tel")){document.getElementById("tel").addEventListener("input", function(event) {var val = event.target.value;var reg = /[\d]/g;if (!reg.test(val)) {event.target.value = "";$.dialog({content:"请输入数字", time: 1000});}})}//验证码验证if(document.getElementById("VerifyCode")){document.getElementById("VerifyCode").addEventListener("input", function(event) {var val = event.target.value;var reg = /[\d]/g;if (!reg.test(val)) {event.target.value = "";$.dialog({content:"请输入数字", time: 1000});}})}//登录 发送验证码var getVerifyFlag = true;var lockKey = false;$('#getVerifyCode').on('click', function () {var tel = $("#tel").val().trim();var dyncode = $("#dyncode").val().trim();if(tel == ''){$.dialog({content: '联系方式不能为空!', time: 2000});return ;}if(!isPhoneNo(tel)){$.dialog({content: '联系方式不正确!', time: 2000});return ;}if(dyncode.length < 4){$.dialog({content: '请输入图形验证码!', time: 2000});return ;}if (getVerifyFlag) {getVerifyFlag = false;$.ajax({url: "{:U('smssend')}?t=" + Math.random(),type: 'POST',data: {tel: tel, dyncode: dyncode,csrf_param:'{$csrf_param}',csrf_token:'{$csrf_token}'},success: function (res) {if (res.status == 1000) {        //成功if (res.re_flag == 1) {$('#dyncodeimg').trigger('click');//刷新动态码
                        }var date = new Date();date = date.getTime();window.localStorage.setItem('getVerifyCodeTime', date);getVerifyCodeCount();$.dialog({content: '发送成功!', time: 2000});$("#clickVerifyFlag").val(true);} else {$.dialog({content: res.data, time: 2000});$('#dyncodeimg').trigger('click');//刷新动态码
                    }getVerifyFlag = true;},error: function () {$.dialog({content: '网络加载失败!', time: 2000});getVerifyFlag = true;}})}});//登录发送验证码 倒计时
    function getVerifyCodeCount() {if (window.localStorage.getItem('getVerifyCodeTime')) {var nowTime = new Date();nowTime = nowTime.getTime();oldTime = Number(window.localStorage.getItem('getVerifyCodeTime'));var t = nowTime - oldTime;//时间差    秒数var seconds = Math.floor(t / 1000);counts = 60 - seconds;var timer = setInterval(function () {if (counts > 0) {counts--;//防止再次发送短信$('#getVerifyCode').attr("disabled","disabled");$('#getVerifyCode').val('已发送(' + counts + '秒)');$('#getVerifyCode').css({'color':'#ccc','pointer-events': 'none'});} else {clearInterval(timer);$('#getVerifyCode').removeAttr("disabled");$('#getVerifyCode').val('重新发送');$('#getVerifyCode').css({'color':'#ec2b2c','pointer-events': 'auto'});}}, 1000)}}

转载于:https://www.cnblogs.com/qdlhj/p/10095301.html

登录之图形跟短信验证码相关推荐

  1. locvps的自动注册(图形和短信验证码的自动识别获取)

    1.通过selenuim实现自动注册 2.图形验证码的识别(简单识别,效果差,可以多循环几次,或者通过二值化处理提高准确率) 3.短信验证码的获取(使用接码平台调用API) selenuim操作 dr ...

  2. 5.Spring Security 短信验证码登录

    Spring Security 短信验证码登录 在 Spring Security 添加图形验证码一节中,我们已经实现了基于 Spring Boot + Spring Security 的账号密码登录 ...

  3. Spring Security 短信验证码登录(5)

    在Spring Security添加图形验证码中,我们已经实现了基于Spring Boot + Spring Security的账号密码登录,并集成了图形验证码功能.时下另一种非常常见的网站登录方式为 ...

  4. 还在开发短信验证码登录?试试(本机号码一键登录)

    点击上方蓝字关注我们 技术总监面试,提问:Redis热点key解决方案 一. 关于秒验(一键登录)基本原理 秒验(一键登录)产品整合了三大运营商特有的数据网关认证能力,升级短信验证码体验,应用于用户注 ...

  5. 使用阿里云短信验证码API发送短信验证码(配置,获取短信验证码,注册,登录,密码重置)

    获取阿里云短信验证码需要的配置信息. 如果是新用户,可以免费领取3个月,老用户的话就只能购买了,但是也不贵. 申请短信签名 申请短信模板 编写发送短信验证码的工具类 代码中我已经进行了详细的注释,也写 ...

  6. SpringSecurity短信验证码登录

    短信验证码登录 时下另一种非常常见的网站登录方式为手机短信验证码登录,但Spring Security默认只提供了账号密码的登录认证逻辑,所以要实现手机短信验证码登录认证功能,我们需要模仿Spring ...

  7. 手把手带你在集成SpringSecurity的SpringBoot应用中添加短信验证码登录认证功能

    本文目录 前言 1 自定义AuthenticationToken类 2 自定义AuthenticationProvider类 3 自定义MobilePhoneAuthenticationFilter ...

  8. security模仿密码登录实现短信验证码登录

    security模仿密码登录实现短信验证码登录 模仿UsernamePasswordAuthenticationToken创建短信验证码的token类SmsAuthenticationToken /* ...

  9. cas5.3.9自定义手机短信验证码登录

    cas自定义多种登录方式 cas添加手机短信验证码登录 cas添加手机短信验证码登录 全部基于SpringBoot,以及SpringWebflow开发,请在有此基础再进行学习! 添加Maven依赖 & ...

最新文章

  1. 线程组多次调用_详细分析 Java 中启动线程的正确和错误方式
  2. php文本分割成csv,怎么在php中将文本文件转换为csv文件并输出
  3. Matlab编程与数据类型 -- 内联函数
  4. Flume Sinks官网剖析(博主推荐)
  5. canvas百分比加载动画
  6. VTK:采样函数用法实战
  7. Boost:parallel grep测试程序
  8. 台湾游戏企业抢滩大陆 研发成竞争核心
  9. POJ2823 Sliding Window 单调队列
  10. 网站漏洞修复方案防止SQL注入攻击漏洞
  11. 【letex编辑输出】pdf文件嵌入字体embedded fonts的问题
  12. Java毕业设计——>SpringBoot+VUE实现的前后端分离小米手机商城系统
  13. Android系统sdcard目录
  14. 宅男也可变形男-我是如何在11个月零27天减掉80斤的
  15. DownUnderCTF 2021 osint 赛后复现
  16. 【opencv机器学习】基于SVM和神经网络的车牌识别
  17. Spring Boot面试必问:启动流程
  18. 泛微oa流程表单之请假单(判断请假结束时间不能小于等于请假开始时间)
  19. 身残志不残-霍金精神
  20. 惯量辨识c语言程序设计,异步电机参数在线辨识技术的(硬件部分)毕业设计.doc...

热门文章

  1. ABP官方文档翻译 0.0 ABP官方文档翻译目录
  2. 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack(131)
  3. 在spring boot 配置actuator
  4. Mdadm 设置管理
  5. 阿里云云服务器更新GCC是提示错误解决方案
  6. 在ASP.NET中重写URL 方法三:在IIS7中使用HttpModule 实现无扩展名的URL重写
  7. 谦卑的心 2008-9-27 10:21:00 (21ic)
  8. 图像聚类与检索的简单实现(一)
  9. 第 28 小时项目管理过程实践和案例分析
  10. 深度剖析Zabbix Web scenarios数据表结构