js中60s之内发送验证码,按钮不可被点击,错在哪?怎么修改?

JavaScript028

js中60s之内发送验证码,按钮不可被点击,错在哪?怎么修改?,第1张

问题有几点,代码如下:

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

首先关于手机号长度可以使用js判断用户输入长度,如果不等于11位可以进行相关提示,具体可参考以下代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<script type="text/javascript">

window.onload=function(){

var aIpt = document.getElementsByTagName('input')

aIpt[1].onclick=function(){

if((aIpt[0].value).length==11){

alert("您输入的长度是11位")

}

else{

alert("请进行正确的输入")

}

}

}

</script>

</head>

<body>

<input type="text" placeholder="请输入11位数字" name="">

<input type="button" value="跳转" name="">

</body>

</html>

判断用户输入的是不是数字,可以使用isNaN进行判断,具体可以参考以下代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<script type="text/javascript">

window.onload=function(){

var aIpt = document.getElementsByTagName('input')

aIpt[1].onclick=function(){

if((aIpt[0].value).length==11&&isNaN(aIpt[0].value)==false){

alert("您输入的长度是11位")

}

else{

alert("请进行正确的输入")

}

}

}

</script>

</head>

<body>

<input type="text" placeholder="请输入11位数字" name="">

<input type="button" value="跳转" name="">

</body>

</html>

前面的代码作为判断长度的单独展示,后面的代码,可以完整的展示限制长度和判断数字

可以用JS做个简单的验证码 <script language="javascript">var code//在全局 定义验证码

function createCode()

{ //创建验证码函数

code = ""

var codeLength =5//验证码的长度

var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')//所有候选组成验证码的字符,当然也可以用中文的

for(var i=0i<codeLengthi++)

{

var charIndex =Math.floor(Math.random()*36)

code +=selectChar[charIndex]

}// 设置验证码的显示样式,并显示

document.getElementById("discode").style.fontFamily="Fixedsys" //设置字体

document.getElementById("discode").style.letterSpacing="3px" //字体间距

document.getElementById("discode").style.color="#ff0000" //字体颜色

document.getElementById("discode").innerHTML=code // 显示

}</script>把上面一段JS代码放到<head></head>标签中在页面装载的时候,调用验证码创建函数 <body onload="createCode()

">在验证码输入框的后面放一个标签 <span id="discode"></span>