首先关于手机号长度可以使用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来做,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>