饿了么组件库element-ui正则表达式验证表单，后端验证表单
最新回答
有你委屈也是欢乐的
2022-03-30 06:47:59
<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>
热门标签
