在JS中如何实现验证码倒计时
这篇文章给大家分享一段实例代码发送验证码之后开始60S倒计时功能，具体实例代码大家参考下本文
原型图
需求：手机号验证
发送验证码之后开始60S倒计时
60s以后如果没有填写验证码，可重新发送
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script src="http://code.jquery.com/jquery-latest.js";></script>
</head>
<body>
<input type="text" id="phone" class="am-form-field my-radius" placeholder="请输入手机号" style="">
<p style="height:2rem;">
<font id="errMsg1" color="red" style=""></font>
</p>
<p>
<input id="rpcode" type="text" placeholder="请输入验证码">
<input id="getCode" type="button" value="获取验证码" onclick="sendMessages()"></input>
<font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></font>
</p>
<p id="start">
<span>开始</span>
</p>
<!-- 保存验证码 -->
<input type="text" id="code" hidden="true">
<script>
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount; //当前剩余秒数
var code = ""; //验证码
var codeLength = 6; //验证码长度
function sendMessages() {
curCount = count;
var phone = $("#phone").val()
if(validatePhone(phone)) {
return;
}
if(phone != "") {
//设置button效果，开始计时
$("#getCode").attr("disabled", "true");
$("#getCode").val("请在" + curCount + "秒内输入");
InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
$.ajax({
url: "getCode.action",
dataType: "json",
type: "get",
data: "phone=" + phone,
success: function(data) {
//保存验证码
$("#code").val(data);
}
});
} else {
alert("手机号码不能为空！！！！！！");
}
}
//timer处理函数
function SetRemainTimes() {
if(curCount == 0) {
window.clearInterval(InterValObj); //停止计时器
$("#getCode").removeAttr("disabled"); //启用按钮
$("#getCode").val("重新发送验证码");
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
} else {
curCount--;
$("#getCode").val("请在" + curCount + "秒内输入");
}
}
//开始按钮点击事件
$("#start").click(function() {
window.location.href = "regafter.html?phone=" + $("#phone").val();
})
//验证手机号
function validatePhone(phone) {
if(phone == '') {
$("#errMsg1").html(" 请先填写手机号");
$("#errMsg1").show();
return true;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phone)) {
$("#errMsg1").html(" 请输入有效的手机号");
$("#errMsg1").show();
return true;
}
return false;
}
//验证码非空和错误验证
function validateCode() {
var phone = $("#phone").val();
var code = $("#code").val();
var rpcode = $("#rpcode").val();
if(validatePhone(phone)) {
return true;
}
if(code == '') {
$("#errMsg2").html(" 请先获取验证码");
$("#errMsg2").show();
return true;
}
if(rpcode == '' || code != rpcode) {
$("#errMsg2").html(" 请正确输入验证码");
$("#errMsg2").show();
return true;
}
alert(code != rpcode);
return false;
}
$("#phone").on("focus", function() {
$("#errMsg1").hide();
})
$("#rpcode").on("focus", function() {
$("#errMsg2").hide();
})
</script>
</body>
</html>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在JS中如何实现验证码倒计时. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
