<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 500px;
height: 400px;
}
.box input{
width: 100%;
}
button{
width: 100px;
height: 35px;
}
</style>
</head>
<body>
<div class="box">
<input class="ipt" type="text" placeholder="请输入用户名:">
<input class="ipt" type="text" placeholder="请输入手机号:">
<input class="ipt" type="text" placeholder="请输入年龄:">
<input class="ipt" type="text" placeholder="请输入密码:">
<input class="ipt" type="text" placeholder="请输入身份证:">
<input class="ipt" type="text" placeholder="请输入有效数字:">
<button class="btn">注册</button>
</div>
<script>
let btn=document.getElementsByClassName("btn")[0];
let ipt=document.getElementsByClassName("ipt");
let user=/^([A-Z]{1,}|[a-z]{1,}|\d{1,}){6,}$/,
tel=/^1[35789]\d{9}$/,
age=/^((1[8-9])|([2-5]\d)|(6[0-5]))$/,
selfId=/^\d{17}(\d|X)$/,
pwd=/^(\d|[a-zA-Z]){6,}$/,
ok=/^([+\-]?(([1-9]\d+)|\d)(\.\d+)?)$/;//检测有效数字
//[]内+号不需要转义, -号最好是转义一下
//校验QQ邮箱: (5到11位数,全部是数字);
qqEmail=/^(\d{5}|\d{6}|\d{7}|\d{8}|\d{9}|\d{10}|\d{11})(\@[q][q]\.[c][o][m])$/
btn.onclick=function(){
if(!user.test(ipt[0].value)){
alert("用户名格式不正确");
return;
}
if(!tel.test(ipt[1].value)){
alert("手机格式不正确");
return;
}
if(!age.test(ipt[2].value)){
alert("年龄格式不正确");
return;
}
if(!selfId.test(ipt[4].value)){
alert("身份证格式不正确");
return;
}
if(!pwd.test(ipt[3].value)){
alert("密码格式不正确");
return;
}
if(!ok.test(ipt[5].value)){
alert("密码格式不正确");
return;
}
if(!qqEmail.test(ipt[6].value)){
alert("密码格式不正确");
return;
}
(function(){
alert('欢迎!');
})()
}
</script>
</body>
</html>