实现方案是,点击获取验证码,发送手机号到服务端,服务端通过短信平台网关接口发送验证码;用户接收到验证码,输入验证码,然后将手机号和验证码同时提交到服务端,由服务端进行验证,并返回是否验证通过
整个过程中验证码并未出现在前端
问题有几点,代码如下:
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题</title>
<style>
.msgs1{
background:blue
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
//获取短信验证码
var validCode=true
$(".msgs").click (function () {
//var mobile = document.getElementById("mob").value
//这里有一处错误:你现在用的是jquery,不能直接用js的方法,应该用下面这种:
var mobile=$("#mobile").val()
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
if(!myreg.test(mobile))
{
alert('请输入有效的手机号码!')
return false
}
//var urlstr='{:U('User/sendcode/mobile/','','')}'+ '/'+ mobile
//$.post(urlstr)
//这个地方我就直接跳过了
alert("验证码已经成功发送,请注意查收!")
var time=60
var code=$(this)
if (validCode) {
validCode=false
code.addClass("msgs1")
var t=setInterval(function () {
time--
code.val(time+"秒")//这里,你应该和我这里一样,.msgs 是一个button是吧?那么,就不能用html()方法,而应该用val()方法
if (time==0) {
clearInterval(t)
code.val("重发")//同上
validCode=true
code.removeClass("msgs1")
}
},1000)
}
})
})
</script>
</head>
<body>
<form action="">
号码:<input type="text" id="mobile" value="13512346581">
<input type="button" value="发送" class="msgs">
</form>
</body>
</html>
<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8" />
<title>pro.html</title>
<style type="text/css">
.checkCode {
cursor: pointer
border: 1px solid black
text-align: center
line-height: 26px
width: 115px
height: 35px
}
</style>
<script type="text/javascript">
var sleep = 30, interval = null
window.onload = function ()
{
var btn = document.getElementById ('btn')
btn.onclick = function ()
{
if (!interval)
{
this.style.backgroundColor = 'rgb(243, 182, 182)'
this.disabled = "disabled"
this.style.cursor = "wait"
this.value = "重新发送 (" + sleep-- + ")"
interval = setInterval (function ()
{
if (sleep == 0)
{
if (!!interval)
{
clearInterval (interval)
interval = null
sleep = 30
btn.style.cursor = "pointer"
btn.removeAttribute ('disabled')
btn.value = "免费获取验证码"
btn.style.backgroundColor = ''
}
return false
}
btn.value = "重新发送 (" + sleep-- + ")"
}, 1000)
}
}
}
</script>
</head>
<body>
<input class="checkCode" type="button" id="btn" value="免费获取验证码" />
</body>
</html>