短信验证码js实现

短信验证码实现
     我们在使用移动、电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码。最近因为某省业务需要,也做了个类似的功能。
    原理很简单,就是在用户点击"获取验证码"的时候,Ajax获取一串固定位数的数字,然后写数据库发短信,写Cookie设置验证码的有效期。
    JS请求验证码如下:
 $.ajax({
      type: "GET",
      url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.val() + "&smsCodeRand=" + num,
      success: function(result) {
          if (result == "Y") {
             alert("验证码已发送至您输入的手机号!有效期5分钟");
             RemainTime();
          }
          else {
              alert("验证码获取失败!请重新获取");
          }
       },
       error: function() { alert("error"); }
  });

//获取6位随机验证码
function random() {
    var num = "";
    for (i = 0; i < 6; i++) {
        num = num + Math.floor(Math.random() * 10);
    }
    return num;
}
//验证码有效期倒计时
function RemainTime() {
    var iSecond;
    var sSecond = "", sTime = "";
    if (iTime >= 0) {
        iSecond = parseInt(iTime % 300);
        if (iSecond >= 0) {
            sSecond = iTime + "秒";
        }
        sTime = "<span style=‘color:darkorange;font-size:13px;‘>" + sSecond + "</span>";
        if (iTime == 0) {
            clearTimeout(Account);
            sTime = "<span style=‘color:red;font-size:12px;‘>验证码已过期</span>";
        }
        else {
            Account = setTimeout("RemainTime()", 1000);
        }
        iTime = iTime - 1;
    }
    $("#endtime").html(sTime);
} 

      前端要处理的工作基本如上,现在要在HttpHandler中添加逻辑了,为了防止Js生成的验证码不符规则,我们在后端重新生成一次:
if (smscoderand.Length != 6) //如果JS生成的随机码不符,则用C#生成随机码
{
   smscoderand = GetRandom();
}
//写短信数据,发SMS
//写Cookie,设置验证码有效期,比如5分钟
//注:如果以上都处理成功,返回"Y",处理失败,返回"N"
      这里为了方便,验证码的有效期验证就用Cookie来完成。在业务提交的时候,会获取客户端的这个Cookie,看是否存在,如果不存在肯定就是过期了。如果后续业务扩展可能会考虑加上数据库的有效期验证,以及一些其它的规则,比如一小时、一天内限制发送验证码的条数(总不能让你无限制的发送短信吧) 等等。
时间: 2024-10-20 10:25:08

短信验证码js实现的相关文章

jquery 倒计时 60秒 短信 验证码 js ajax 获取

$(function () { var wait=60; function time( o ){ if (wait == 0) { o.toggleClass('bg-lv'); o.removeAttr("disabled"); o.val("获取验证码"); wait = 60; } else { o.removeClass('bg-lv'); o.attr("disabled",true); o.val("重新发送("

短信验证码js

var isSmsSend = false; function clickButtona(obj){ var obj = $(obj); var mobile=$("input[name=mobile]").val(); var URL1 = "{:url('member/index/getcode')}"; if(isSmsSend == false){ isSmsSend = true; $.ajax({ url: URL1, type: 'post', dat

获取短信验证码 js效果

var countdown = 60; //计时,默认为60秒发送一次 //$(".cell_btn") 为发送验证码按钮 function settime() { if (countdown == 0) { //60秒结束就把按钮打开吧. $(".cell-btn").css("background-color", "#fff");//改变背景颜色 $(".cell-btn").attr("di

js 发送短信验证码倒计时

html <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> js // 短信验证码倒计时var countdown=60;function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value=&

js 短信验证码倒计时效果

<div class="input-group" id="login_do"> <input type="num" class="form-control inputD" id="telCode" placeholder="短信验证码"/> <span class="input-group-addon input-span-black" 

实现短信验证码注册

今晚研究了下短信验证码注册,很简单,用的是  云通讯的短信系统(收费的,不过有测试的api给我们做测试).好了,不多说,进入正题. 1.收到到云通讯短信系统注册账号,然后下载他们的封装好的短信api接口代码,解压,然后找到CCPRestSDK.php文件和SendTemplateSMS.php文件,将其拉到根目录文件夹里: 2.打开SendTemplateSMS.php文件,首先注意include_once('./CCPRestSDK.php'),千万别包含错路径了,将云通讯给的测试主账号,主账

程序君带你畅聊发送短信验证码

现在不管是网站,还是app等互联网和移动互联网产品,绝大部分注册都是直接用手机号注册登录的,方式就是给手机发送短信验证码,然后把验证码填入,后台程序去匹配判断用户填入的验证码和发送的是否一致. 我最近做的好几个项目都用到了发送短信验证码的这个第三方接口,其实这个发送验证码的原理很简单,实现也很简单. 如下三个图,是我做的其中一个项目的相关效果截图: 我用的比较多的第三方短信接口是容联-云通讯的(http://www.yuntongxun.com/),它的API挺强大的,也挺稳定的,使用也不难,有

短信验证码倒计时

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yan.aspx.cs" Inherits="Technology.yan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server&

ava调用WebService接口实现发送手机短信验证码功能

二:前台的注册页面的代码:reg.jsp  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <%@page import="cn.gov.csrc.base.action.FindAllData&