<!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>