js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是否一致

JavaScript017

js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是否一致,第1张

这个不能使用js来做，js属于客户端脚本，手机验证码不能通过任何方式显示到前端，所以js不能来做校验

实现方案是，点击获取验证码，发送手机号到服务端，服务端通过短信平台网关接口发送验证码；用户接收到验证码，输入验证码，然后将手机号和验证码同时提交到服务端，由服务端进行验证，并返回是否验证通过

整个过程中验证码并未出现在前端

问题有几点，代码如下：

<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>