jsp部分:是一个普通的<input>标签

<input type="tel" name="unumber"
    id="phone" placeholder="请输入手机号" >
<input  type="tel"
    name="input_code" id="code" placeholder="请输入验证码" >
<input  type="button"
    style=" border-radius: 5px;width: 100%; height: 100%; text-align: center; padding-left: 2px"id="getCode" value="获取" οnclick="sendCode(this)">

js部分:

// 点击获取,进入倒计时,按序号进行

clock = '';
nums = 60;
btn = null;
function time(thisBtn) {//③time()函数处理“获取”按钮btn = thisBtn;btn.disabled = true; // 将按钮置为不可点击btn.value = nums + '秒后可重新获取';//让按钮显示倒计时clock = setInterval(doLoop, 1000); // ④setInterval(arg1,arg2)为定时器,arg1为执行哪个函数,arg2为多久执行一次(单位毫秒),
}
function doLoop() {nums--;if (nums > 0) {btn.value = nums + '秒后可重新获取';} else {//如果倒数计时结束,就清除定时器,将按钮状态改为可点击,并将按钮值显示为“重新发送”,最后重置倒计时时间60秒。clearInterval(clock); // 清除js定时器btn.disabled = false;btn.value = '重新发送验证码';nums = 60; // 重置时间}
}
function sendCode(ele) {// ①点击出发函数,进入后台发送验证码$.ajax({url : "UserServlet?operation=send",data : {"phone" : $("#phone").val()},type : "post",async : true,success : function(data) {//成功回调函数,失败不调用!time(ele);//②发送成功后,调用函数time();},});
}


后台java代码:


// 向用户手机号发送验证码,并保存在session域中,方便进行验证此验证码是否输入正确。 
  public void send(HttpServletRequest request, HttpServletResponse response) {String phone = request.getParameter("phone");try {String code = SendMessage.sendMess(phone);//此处为自己封装的sendMess()方法,获取验证码,见下面。request.getSession().setAttribute("code", code);} catch (Exception e1) {// TODO Auto-generated catch blocktry {response.getWriter().write("发送失败了");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}try {response.getWriter().write("发送成功");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
//此处用的是网易云短信服务,本段代码可直接拷贝使用,需更改相应账号、秘钥、以及短信id,也可自行参考网易云短信开发手册。
public class SendMessage {
     //发送验证码的请求路径URLprivate static final StringSERVER_URL="https://api.netease.im/sms/sendcode.action";//网易云信分配的账号,请替换你在管理后台应用下申请的Appkeyprivate static final String APP_KEY="545ab725fbfe94fa3585bf24ba18a889";//网易云信分配的密钥,请替换你在管理后台应用下申请的appSecretprivate static final String APP_SECRET="5862f3168049";//随机数private static final String NONCE="123456";//短信模板IDprivate static final String TEMPLATEID="3094133";//手机号//private static final String MOBILE="13812186059";//验证码长度,范围4~10,默认为4private static final String CODELEN="4";public static String sendMess(String phone) throws Exception {DefaultHttpClient httpClient = new DefaultHttpClient();HttpPost httpPost = new HttpPost(SERVER_URL);String curTime = String.valueOf((new Date()).getTime() / 1000L);/** 参考计算CheckSum的java代码,在上述文档的参数列表中,有CheckSum的计算文档示例*/String checkSum = CheckSumBuilder.getCheckSum(APP_SECRET, NONCE, curTime);// 设置请求的headerhttpPost.addHeader("AppKey", APP_KEY);httpPost.addHeader("Nonce", NONCE);httpPost.addHeader("CurTime", curTime);httpPost.addHeader("CheckSum", checkSum);httpPost.addHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");// 设置请求的的参数,requestBody参数List<NameValuePair> nvps = new ArrayList<NameValuePair>();/** 1.如果是模板短信,请注意参数mobile是有s的,详细参数配置请参考“发送模板短信文档”* 2.参数格式是jsonArray的格式,例如 "['13888888888','13666666666']"* 3.params是根据你模板里面有几个参数,那里面的参数也是jsonArray格式*/nvps.add(new BasicNameValuePair("templateid", TEMPLATEID));nvps.add(new BasicNameValuePair("mobile", phone));nvps.add(new BasicNameValuePair("codeLen", CODELEN));httpPost.setEntity(new UrlEncodedFormEntity(nvps, "utf-8"));// 执行请求HttpResponse response = httpClient.execute(httpPost);/** 1.打印执行结果,打印结果一般会200、315、403、404、413、414、500* 2.具体的code有问题的可以参考官网的Code状态表* * * {"code":200,"msg":"1","obj":"8588"}*/String result = EntityUtils.toString(response.getEntity(), "utf-8");//将输出结果进行解析,获取发送出去的验证码,例如上述中的“8588”。String[] results = result.split(":");String _result =results[3].substring(1, 5);return _result;}
}

												

简单实现手机号验证码注册功能相关推荐

  1. js手机号验证码注册

    js详细部分 说明: 1.开始输入手机号, 判断手机号是否符合格式,符合格式则获取验证码及注册的按钮样式发生改变 . 2.此时点击获取验证码,向后台请求验证码,请求成功则开始验证码倒计时,否侧返回提示 ...

  2. python注册登陆程序_python的简单的登陆和注册功能实现

    大致的思路 我是分别写了五个函数fileRead() 文件读取FileWrite()文件写入FileModify()文件修改Register()注册Login()登陆 来实现整个功能的,话不多说直接上 ...

  3. 亿级高并发电商项目-- 实战篇 --万达商城项目 十二(编写用户服务、发送短信功能、发送注册验证码功能、手机号验证码登录功能、单点登录等模块)

  4. 交友项目【手机号登录注册功能】实现

    目录 1:用户登录 1.1:接口文档 1.2:API接口定义 1.3:Dubbo服务提供者 配置文件 启动引导类 数据访问层 API接口实现 1.4:Dubbo服务消费者 UserController ...

  5. ThinkPHP5 实现短信验证码注册功能

    在现在这个短信通知泛滥的年代,短信验证码成了不可或缺,与此同时,短信验证码的平台也是各种各样.这样一来,平台好坏就无从区分.这里推荐用云之讯的吧,速度还不错,延迟没有,还送10块钱(100多条吧,测试 ...

  6. 新手利用C# 实现简单仿QQ登陆注册功能

    闲来没事,想做一个仿QQ登陆注册的winform,于是利用工作之余,根据自己的掌握和查阅的资料,历时4天修改完成,新手水平,希望和大家共同学习进步,有不同见解希望提出! 废话不多说,进入正题: 先来看 ...

  7. Vue - 实现获取手机验证码倒计时 60 秒(手机号+验证码登录功能)

    前言 网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...

  8. 使用JSP实现简单的登录注册功能,并且使用Session跟踪用户登录信息

    使用JSP实现简单的登录注册功能,并且使用了Session来跟踪用户的登录信息,这个是用纯JSP来实现此功能的,由于没有连接数据库,所以使用List来模拟数据库. 第一步:创建web项目 如果有不会创 ...

  9. MVC框架实现用户登录注册功能(连接数据库)

    目录 一.简单理解MVC框架 二.项目结构 三.项目源码 3.1 User 3.2 UserDao 3.3 RegisterDao 3.4 servletControll 3.5 servletCon ...

  10. 前端获取验证码、手机号登录、注册功能

    07.前端获取验证码.手机号登录.注册功能 Register.vue <template><div class="register"><div cla ...

最新文章

  1. 汇编语言PTR运算符:重写操作数的大小类型
  2. 使用yarn安装quasar,quasar创建新项目 出错error eslint
  3. SQ小组KTV点歌系统简介
  4. 监控mysql数据库里的数据_有谁知道哪种软件可以监控mysql数据库上执行的数据脚本吗?...
  5. MySQL笔记-MHA(Master High Availability)搭建
  6. linux 权限mod,linux学习—权限管理
  7. leetcode python3 简单题111. Minimum Depth of Binary Tree
  8. 一个日志框架的开源,有些不错的创意。
  9. nginx反向代理镜像网站做小偷站
  10. 信源编码与信道编码区别(十一)
  11. centos7+docker+安装mysql5.7
  12. 三年测试经验, 字节跳动离职后, 一口气拿到 15 家公司 Offer
  13. 850pro测试软件,业界领先技术 三星850PRO 256G固态硬盘测试
  14. 微软project下载安装及激活教程
  15. 简单的网页制作期末作业——电影泰坦尼克号(4页)
  16. python高考加分_Python将纳入浙江省新高考,你知道了吗?
  17. 首款国产7纳米GPGPU芯片在上海问世
  18. GO语言基础-08-内建函数-delete(删除map的成员)
  19. U盘中的数据被格式化了怎么恢复?原来数据恢复也很简单
  20. 分享一个有趣的斯特林发动机

热门文章

  1. JavaScript 计算时间差
  2. 服务器系统0 c000000f,win10系统提示错误代码0xc000000f的三种解决方法
  3. 服务器密码忘记处理之二:重置密码
  4. 天线设计-电感计算以及天线匹配
  5. STM32驱动TM1616程序加原理图
  6. 遗传算法--适应度尺度变换
  7. 寻找(下载)微信音频文件
  8. 自己来制作iso镜像用于安装OpenBSD
  9. win10开卓越性能模式方法
  10. 数学通道的应用(十四)-负PWM控制下有效值的计算