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. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

  2. 容器化redis高可用方案

    偶然看到一个GITHUB项目,提供了一套Docker Compose下的redis Sentinel方案. 项目地址https://github.com/AliyunContainerService/ ...

  3. webpack --- 详解

    官网: http://webpack.github.io/docs/using-loaders.html 简书: http://www.jianshu.com/p/42e11515c10f

  4. jq实现点击某元素之外触发事件

    <script type="text/javascript"> $(document).bind("click",function(e){ var ...

  5. [转]Eclipse SVN冲突解决

    原文地址:http://www.devnote.cn/article/82.html 基本原则是:每次提交前需要先和线上的对比,先把冲突解决掉,然后把线上的更新到本地,最后把本地的提交上去. 右键项目 ...

  6. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  7. mysql返回最后一列数据

    获取MySQL的表中每个userid最后一条记录的方法,并且针对userid不唯一的情况,需要的朋友可以参考下 表结构 CREATE TABLE `t1` ( `userid` int(11) DEF ...

  8. gulp错误GulpUglifyError: unable to minify JavaScript解决

    这个错误是由于在打包js代码时,js语法错误导致的,修改以下js的语法即可.

  9. java－－HashMap多线程并发问题分析

    并发问题的症状 多线程put后可能导致get死循环 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当时的程序是单线程的,一切都没有问题.后来,我们的程序性能有问题,所以需要变成多 ...

  10. 6个重要的.NET概念:栈,堆,值类型,引用类型,装箱,拆箱

    引言 本篇文章主要介绍.NET中6个重要的概念:栈,堆,值类型,引用类型,装箱,拆箱.文章开始介绍当你声明一个变量时,编译器内部发生了什么,然后介绍两个重要的概念:栈和堆:最后介绍值类型和引用类型,并 ...