`

工具类 - 发送短信验证码

 
阅读更多

发送短信验证码

 

很简单的一个移动端发送短信验证码的功能,验证码生成及发送(第三方接口)都是后台完成,本文内容只是从前端通过JS发送请求。

 

<html>
<head>
    <title>GetVerifiedCode</title>
</head>
<body>
<form action="#" method="post">
    <input type="number" name="cellphone" id="cellphone" value="${this.params.cellphone}" />
    <input id="btnSendVerifiedCode" type="button" value="getVerifiedCode"/>
</form>
%{--提示信息--}%
<div class="message-box">
    <div class="helpMsg hide"></div>
</div>
</body>
</html>

 

<style>
.vCodeActive {
    background-color: #62C16A !important;
    border: 1px solid #62C16A;
    font-size: 1.5rem;
}

.message-box {
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 30%;
    display: flex;
    text-align: center;
    justify-content: center;
}

.helpMsg {
    padding: 2px 10px;
    line-height: 28px;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    color: #fff;
}
</style>

 

var time = 30;
var interval;
$('#btnSendVerifiedCode').click(function () {
	var cellphone = $("#cellphone").val().trim();
    if (!cellphone || !/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(cellphone)) {
        helpMessage("请输入正确的手机号");
        return;
    }

    $.ajax({
        type: "POST",
        url: "http://" + window.location.host + "/action/sendVerifiedCode",
        data: {
            cellphone: cellphone,
        },
         beforeSend:function(){
            interval = setInterval(function () {
                if (time > 0) {
                    $('#btnSendVerifiedCode').attr('disabled', 'disabled').addClass("vCodeActive");
                    $('#btnSendVerifiedCode').val("" + (time--) + '秒后重试');
                } else {
                    $('#btnSendVerifiedCode').removeAttr('disabled').removeClass("vCodeActive");
                    $('#btnSendVerifiedCode').val("获取验证码");
                    time = 60;
                    clearInterval(interval);
                }
            }, 1000);
        },
        success: function (data) {
            if (data.status == "success") {
                helpMessage("验证码发送成功");
            }
            if (data.status == "error") {
                helpMessage("data.errorMessage");
            }
        }
    });
});

function helpMessage(message) {
    $(".helpMsg").text(message).fadeIn(200);
    setTimeout(function () {
        $(".helpMsg").fadeOut(200);
    }, 2000);
}

 

分享到:
评论

相关推荐

    阿里云 API短信接口-短信验证码-短信通知

    短信验证码功能的核心在于快速、准确地生成和发送包含随机数字或字母的短代码,接收方需在限定时间内输入该验证码以完成操作。在C#开发中,可以使用HttpClient类来发起HTTP请求,调用阿里云的SMS SDK,设置相关参数...

    Node.js-短信验证码Node.js平台接口封装实现

    本模块主要实现了对云片服务提供商中给... 大家可以注册云片进行短信验证测试,充值50元,大概可以发送1000条左右。需要注意:注册成功后,需要进行实名及模板等相关认证,不过半个钟头就审核通过了,大家可以自行测试。

    .net framework 腾讯云短信验证码对接

    这些工具类可以帮助开发者更方便地处理与腾讯云服务交互时的一些基础操作。 在.NET项目中,首先需要引入Sms和Common中的DLL文件作为引用,然后实例化SDK提供的客户端对象,配置好AppID和AppKey。接着,根据业务需求...

    安卓短信彩信相关相关-自定义CheckBox短信验证码自动填写.rar

    这个压缩包文件“安卓短信彩信相关相关-自定义CheckBox短信验证码自动填写.rar”显然是一个包含源代码的资源,可能用于演示如何实现这样一个功能。下面我们将详细探讨相关的知识点。 1. **自定义CheckBox**: 在...

    SmsUtil.zip_SMS工具类_java中SMSutil_短信平台_阿里大于发送短信工具类_阿里短信

    "SmsUtil.zip" 是一个包含阿里大于短信服务API的Java工具类,可以帮助开发者快速集成短信发送功能。下面,我们将深入探讨这个工具类以及相关知识点。 1. **阿里大于短信平台** 阿里大于(现更名为阿里云通信)是...

    java发送短信6位随机验证码(2)

    在Java开发中,有时我们需要实现发送短信验证码的功能...以上就是使用Java发送短信验证码的基本流程,具体的实现细节会因不同的短信服务提供商而略有差异。开发者需要根据实际情况结合服务提供商的文档来完成集成工作。

    Swift - URLSession实现短信验证码注册登录完整示例:Swift - URLSession.swift和附件说明.rar

    本示例将深入探讨如何使用Swift的URLSession来实现短信验证码的发送与验证功能,这对于用户注册和登录过程至关重要。下面我们将详细讨论这个过程,并结合"Swift - URLSession.swift"源代码和附件说明来理解其工作...

    Delphi 短信验证码.rar

    在短信验证码场景下,可能需要使用TMemo来显示验证码,TButton触发发送验证码的事件,以及可能的TEdit用于用户输入验证码。 2. **网络通信**:为了发送短信,我们需要使用HTTP或HTTPS协议与短信服务提供商的API接口...

    天翼开放平台自定义短信验证码封装类

    对于短信验证码的封装类,它可能包含了发送验证码、验证验证码、生成随机验证码等功能,并且可能还提供了错误处理和日志记录的机制。 具体到这个"天翼开放平台自定义短信验证码封装类",我们可以期待以下特性: 1. ...

    java短信服务工具类

    在Java编程中,这样的工具类通常包含了一系列方法,用于发送、接收和处理短信。下面我们将详细探讨Java短信服务工具类的关键知识点。 1. **SMS协议理解**: 短信服务通常基于GSM 03.40或3GPP TS 23.040标准,这些...

    Springboot实现阿里云通信短信服务有关短信验证码的发送功能

    在配置完成后,可以创建一个名为`AliyunMessageUtil`的工具类,用来封装发送短信验证码的逻辑。这个工具类通常会包含如下方法: 1. 初始化阿里云短信服务的配置,如设置AccessKey和签名。 2. 发送短信验证码的方法...

    天翼短信验证码示例代码

    本示例代码“天翼短信验证码示例代码”提供了三种不同的验证码实现方式,包括模板短信、自定义短信验证码以及下发短信验证码,旨在帮助开发者理解和应用这类技术。 首先,我们来探讨模板短信。模板短信是预先设定好...

    天翼开放平台免费验证码接口调用工具类

    该能力通过运营商级优质服务通道,面向全国全网用户免费发送短信验证码, 24小时不间断发送,100%PUSH即时到达。 为了保证短信验证码的安全性,下发短信验证码之前,需要首先获取信任码,信任码有效期3分钟,且使用...

    sms工具类调用阿里云短信服务

    阿里云短信服务是一款高效、安全、稳定的企业级通信服务,为开发者提供了便捷的API接口,使得应用程序能够轻松发送短信验证码、通知短信等。在Java开发中,我们可以创建一个`sms工具类`来封装这些调用逻辑,从而简化...

    阿里云短信验证码

    阿里云短信验证 , 发送工具类 , 包含需要的pom坐标jar包 , 可以直接引入项目使用

    java阿里短信验证码

    通过阿里云提供的SDK,开发者可以方便地集成短信验证码服务,实现在应用程序中向多个手机同时发送验证码。本文将深入探讨如何使用Java与阿里短信平台进行交互,以及实现验证码的发送和验证。 1. 阿里短信服务介绍 ...

    IDEA阿里云短信验证码项目源码

    本项目使用IntelliJ IDEA(IDEA)集成开发环境,结合阿里云的短信服务,实现了发送短信验证码的功能。以下是对该项目的详细解析: 1. **阿里云短信服务** 阿里云提供了一套完整的短信服务,包括API接口、SDK以及...

    自定义阿里云短息验证码类 aliyun.tar.gz

    通过以上步骤,我们可以构建一个自定义的阿里云短信验证码类,使得在项目中集成短信服务变得更加简单和规范。这个类不仅可以用于发送验证码,也可以扩展到其他类型的短信服务,如发送通知消息等。记住,良好的代码...

    阿里云短信验证码java整理jar包

    阿里云短信验证码Java整合jar包是一个专为Java开发者设计的工具,它简化了与阿里云短信服务接口的交互过程,使开发者能够快速便捷地在自己的应用程序中实现短信验证码的发送功能。这个jar包包含了阿里云SDK的核心...

    行业分类-设备装置-CMPP短信平台及其应用方法.zip

    CMPP短信平台是一种基于中国移动通信协议的短信...总之,CMPP短信平台是企业实现大规模、高效短信发送的关键工具,通过理解和掌握其工作原理和应用方法,企业能够更好地利用这一通信技术提升服务质量,增强用户体验。

Global site tag (gtag.js) - Google Analytics