1. 代码如下：

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

/*-------------------------------------------*/

var InterValObj; //timer变量，控制时间

var count = ; //间隔函数，1秒执行

var curCount;//当前剩余秒数

var code = ""; //验证码

var codeLength = ;//验证码长度

function sendMessage() {

    curCount = count;

    var phone=$("#phone").val();//手机号码

    if(phone != ""){

        //产生验证码

        for (var i = ; i < codeLength; i++) {

            code += parseInt(Math.random() * ).toString();

        }

        //设置button效果，开始计时

        $("#btnSendCode").attr("disabled", "true");

        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

        InterValObj = window.setInterval(SetRemainTime, ); //启动计时器，1秒执行一次

    //向后台发送处理数据

        $.ajax({

            type: "POST", //用POST方式传输

            dataType: "text", //数据格式:JSON

            url: 'Login.ashx', //目标地址

            data: "phone=" + phone + "&code=" + code,

            error: function (XMLHttpRequest, textStatus, errorThrown) { },

            success: function (msg){ }

        });

    }else{

        alert("手机号码不能为空！");

    }

}

//timer处理函数

function SetRemainTime() {

    if (curCount == ) {

        window.clearInterval(InterValObj);//停止计时器

        $("#btnSendCode").removeAttr("disabled");//启用按钮

        $("#btnSendCode").val("重新发送验证码");

        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效

    }

    else {

        curCount--;

        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

    }

}

</script>

</head>

<body>

<form>

    <div>

        <font color="red">*</font>手机号码：

    </div>

    <div>

        <input type="text" id="phone" name="phone"/>

    </div>

    <div>

        <font color="red">*</font>验证码：

    </div>

    <div>

        <input type="text" id="checkCode" name="checkCode" size=""/>

        <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />

    </div>

    <div>

        <input type="submit" value="登陆"/>

    </div>

</form>

</body>

</html>

前端 js 发送验证码的更多相关文章

  1. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

  2. JS发送验证码；并设置cookie

    Tool.send_code = function(obj) { var isCheck = true, form = $('#editInfo_Form'); var mobile = form.f ...

  3. js发送验证码（倒计时）

    需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...

  4. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  5. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  6. 腾讯云短信服务+Node.js给手机发送验证码

    最近公司需要些一个登陆验证和修改密码验证,需要用到验证码,我用Node.js写了一个给手机发验证码的代码,下面实现的功能有:生产验证码,(计时器)验证码失效时间,给手机发送短信. 首先看官方文档,在给 ...

  7. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  8. 原生js实现发送验证码

    var form = { myfun:function(){ var el = form.config().el; var button = form.config().button; var tim ...

  9. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [Leetcode] Course Schedule

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  2. Servlet容器Tomcat中web.xml中url-pattern的配置详解[附带源码分析]

    目录 前言 现象 源码分析 实战例子 总结 参考资料 前言 今天研究了一下tomcat上web.xml配置文件中url-pattern的问题. 这个问题其实毕业前就困扰着我,当时忙于找工作. 找到工作 ...

  3. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. Fluent Nhibernate之旅（五）--利用AutoMapping进行简单开发

    Fluent Nhibernate(以下简称FN)发展到如今,已经相当成熟了,在Nhibernate的书中也相应的推荐了使用FN来进行映射配置,之前写的FN之旅至今还有很多人会来私信我问题,说来惭愧, ...

  5. SVN合并代码

    分之合并主干代码, 修改冲突后提交, 更新本地代码, 主干合并分之,

  6. linux-磁盘空间（du-df）

    当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du可以查看文件及文件夹的大小. 简要介 ...

  7. Asp.Net 自定义储存Session方式

    介绍 由于针对于自定义Session存储方式比较少,所以整理了使用自定义Session的方式.用于构建自定义会话存储提供程序代码,而不是使用默认的 SessionStore 介绍 背景 本文使用的是m ...

  8. 【USACO 2.3】Zero Sum（dfs）

    按字典序输出所有在123..n之间插入'+','-',' '结果为0的表达式.. http://train.usaco.org/usacoprob2?a=jUh88pMwCSQ&S=zeros ...

  9. bzoj 4557: [JLoi2016]侦察守卫 树归

    bzoj 4557: [JLoi2016]侦察守卫 设f[x][j]表示覆盖以x为根的子树的所有应该被覆盖的节点,并且以x为根的子树向下j层全部被覆盖的最小代价. 设g[x][j]表示与x距离大于j全 ...

  10. ASP.NET MVC中viewData、viewBag和templateData的使用与区别

    一:类型比较 1.1)ViewBag是动态类型(dynamic). 1.2)ViewData是一个字典型的(Dictionary)-->ViewDataDictionary. 1.3)TempD ...