简单实现手机号验证码注册功能

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 block
			try {
				response.getWriter().write("发送失败了");
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		try {
			response.getWriter().write("发送成功");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
  
  
//此处用的是网易云短信服务，本段代码可直接拷贝使用，需更改相应账号、秘钥、以及短信id，也可自行参考网易云短信开发手册。
  
  
public class SendMessage {
	 //发送验证码的请求路径URL
    private static final String
            SERVER_URL="https://api.netease.im/sms/sendcode.action";
    //网易云信分配的账号，请替换你在管理后台应用下申请的Appkey
    private static final String 
            APP_KEY="545ab725fbfe94fa3585bf24ba18a889";
    //网易云信分配的密钥，请替换你在管理后台应用下申请的appSecret
    private static final String APP_SECRET="5862f3168049";
    //随机数
    private static final String NONCE="123456";
    //短信模板ID
    private static final String TEMPLATEID="3094133";
    //手机号
    //private static final String MOBILE="13812186059";
    //验证码长度，范围4～10，默认为4
    private 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);


        // 设置请求的header
        httpPost.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;
    }
}

  
  


  
  


 
 

最后

以上就是英俊斑马为你收集整理的简单实现手机号验证码注册功能的全部内容，希望文章能够帮你解决简单实现手机号验证码注册功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。