1、首先首先,在网页中定义函数judgehandt,用于判断手机号格式是否正确,定义一个变量phone,用来保存网页中输入的手机号码。
2、用if语句判断输入的手机号码值,条件为输入的值是否为默认值号码。
3、如果条件成立,则输出您的手机号为空,提示输入手机号。
4、使用return方法,退出语句体。
5、接着,判断输入的手机号是否全是数字,与官方的手机号格式是否一致,如下图所示就完成了。
用正则表达式,if判断内容是否为空,为空则提示输入手机号,不为空再用正则验证内容是否符合格式
附上源码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{margin: 0padding: 0}
#box{
width: 240px
height: 100px
border:1px solid gray
border-radius: 10px
padding: 30px 10px 10px 10px
margin: 100px auto 0
}
#tel{
width: 160px
height: 20px
margin: 0
padding-left:5px
}
#btn{
width: 50px
height: 25px
}
p{
margin-top: 10px
font-size: 14px
font-family: 'Microsoft YaHei'
}
</style>
</head>
<body>
<div id="box">
<input type="" name="" id="tel">
<input type="button" name="" value="确认" id="btn">
<p></p>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box')
var oBtn=document.getElementById('btn')
var oP=document.getElementsByTagName('p')[0]
oBtn.onclick=function(){
var val=document.getElementById('tel').value
var reg=/^1[345678]\d{9}$/
if (val=='') {
oP.style.color="red"
oP.innerHTML="请输入手机号!"
}else if(reg.test(val)){
oP.style.color="green"
oP.innerHTML="输入正确!"
}else{
oP.style.color="red"
oP.innerHTML="输入错误,请重新输入!"
}
}
</script>
</body>
</html>