JS实现表单验证功能(验证手机号是否存在,验证
发布网友
发布时间：2022-04-23 02:03
共2个回答
热心网友
时间：2022-04-22 14:15
用正则表达式，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: 0;padding: 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>
热心网友
时间：2022-04-22 15:33
