大二初次使用HTML+JS+CSS实现注册表单_html css js分布注册表单-CSDN博客

本文链接：https://blog.csdn.net/Fishermen_sail/article/details/117845463
写的很乱，又是HTML5又是JS，不是很统一，但功能都做出来了，可以参考参考。
在这里插入图片描述
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>注册表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f7f1e3;
        }

        .main {
            position: relative;
            width: 445px;
            height: 537px;
            margin: 38px auto;
            background-color: #ced6e0;
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.3);
            border-radius: 11px;
        }

        .title .title_span1 {
            float: left;
            margin-left: 11px;
            margin-bottom: 11px;
        }
        .title .title_span2 {
            float: right;
            font-size: 3px;
            margin-right: -35px;
        }

        .title {
            height: 40px;
            width: 400px;
            line-height: 40px;
        }

        .title span {
            font-size: 21px;
            color: #353f42;
        }
        .general {
            width: 330px;
            height: 30px;
            background-color: #fafafb;
            margin-left: 28px;
            border-style: none;
            border-radius: 4px;
            padding-left: 10px;
        }

        .first_select {
            width: 150px;
            margin-left: 28px;
            height: 30px;
            padding-inline: 10px;
            border-radius: 4px;
            border-style: none;
            background-color: #fafafb;
        }

        .sex {
            margin-left: 10px;
            width: 20px;
            height: 14px;
            margin-bottom: 3px;
        }

        textarea {
            /* 禁用拖动 */
            resize: none;
            width: 330px;
            height: 50px;
            background-color: #fafafb;
            padding-left: 10px;
            font-size: 15px;
        }
        .textarea {
            border-radius: 4px;
            border-style: none;
        }
        .submit {
            width: 60px;
            height: 30px;
            margin-left: 168px;
        }

        span {
            font-size: 5px;
            margin-left: 0px;
        }
        .other {
            width: 150px;
            height: 100px;
            background-color: #b2bec3;
            float: right;
            font-size: 3px;
            margin-right: -211px;
            margin-top: -90px;
            border-radius: 3px;
        }
        .other textarea {
            resize: none;
            width: 150px;
            height: 100px;
            background-color: #b2bec3;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="title">
            <span class="title_span1">注册新用户</span>
            <span class="title_span2" id="title_span2"></span>
        </div>
        <form class="register" action="test3-2.html" method="post" onsubmit="return check()">
                <div>
                    <input type="text" autocomplete="off" placeholder="姓名" name="username" required maxlength="10" class="general" id="username"/>
                    <span id="username_span"></span>
                </div>
                <div style="margin-top: 16px">
                    <select class="first_select" id="select3">
                        <option selected disabled hidden >年龄</option>
                    </select>
                </div>
                <div style="margin-top: 16px; margin-left: 30px;">
                    男<input type="radio" class="sex" value="男" name="sex"">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" class="sex" value="女" name="sex"> 
                    <span></span>
                </div>
                <div style="margin-top: 16px">
                    <select class="first_select" id="select">
                        <option selected disabled hidden>所在学院</option>
                    </select>
                    <span></span>
                </div>
                <div style="margin-top: 16px">
                    <select class="first_select" id="select2">
                        <option selected disabled hidden>所在专业</option>
                    </select>
                    <span></span>
                </div>
                <div style="margin-top: 16px">
                    <fieldset class="general" style="height: 50px; padding-left: 10px; padding-top: 4px; width: 330px;">
                        <legend style="font-size: 14px;">爱好</legend>
                        篮球<input type="checkbox" value="篮球" name="sports">&nbsp;&nbsp;&nbsp;&nbsp;足球<input type="checkbox" value="足球" name="sports">&nbsp;&nbsp;&nbsp;&nbsp;乒乓球<input type="checkbox" value="乒乓球" name="sports">&nbsp;&nbsp;&nbsp;&nbsp;橄榄球<input type="checkbox" value="橄榄球" name="sports">  
                    </fieldset>
                    <span></span>
                </div>
                <div style="margin-top: 16px">
                    <input type="text" autocomplete="off" placeholder="电话号码" name="username" required class="general" id="phone" pattern="^0?(13[0-9]|14[579]|15[012356789]|16[6]|17[013678]|18[0-9]|19[89]|14[57])[0-9]{8}$" title="手机号码有误"/>
                    <span id="phone_span"></span>
                </div>
                <div style="margin-top: 16px">
                    <input type="email" autocomplete="off" placeholder="电子邮件" name="username" required class="general" id="email" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"/>
                    <span id="email_span"></span>
                </div>
                <div style="margin-top: 16px; margin-left: 28px;">
                    <textarea cols="15" rows="10" placeholder="备注" maxlength="40" class="textarea" id="textarea" required></textarea>
                    <span id="text_span"></span>
                </div>
                <div style="margin-top: 10px">
                    <input  type='submit' value="提交" class="submit" id="submit_button"></input>
                </div>
        </form>
        <div class="other">
            <textarea  cols="30" rows="10" readonly="readonly"></textarea>
        </div>
    </div>


    <script>
        var k;
        var username = document.querySelector('#username');
        username.onblur = function() {
            var content = username.value;
            if (content.length == 0) {
                // span需要innerText
                document.querySelector('#username_span').innerText = '请输入信息';
                username.focus();
            } else {
                document.querySelector('#username_span').innerText = '';
            }
        }

        var data4 = [
            {name: '1'}
        ];
        function creatOption3(parentID, data) {
            var parentIDX = document.getElementById(parentID);
            for(var i = 18; i <= 28; i++) {
                var opt = document.createElement('option');
                data[0].name = i;
                opt.innerHTML = data[0].name;
                // j = data[i].id;
                parentIDX.appendChild(opt);
            }
        }
        creatOption3('select3', data4);

        var j;
        var data = [
            {
                name: '信息与电子工程学院',
                id: '1'
            },
            {
                name: '机械与能源工程学院',
                id: '2'
            },
            {
                name: '经济与管理学院',
                id: '3'
            }
        ];
        
        function creatOption(parentID, data) {
            var parentID = document.getElementById(parentID);
            for(var i = 0; i < data.length; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = data[i].name;
                // j = data[i].id;
                parentID.appendChild(opt);
            }
        }
        creatOption('select', data);

        var data2 = [
            {name: '软件工程'},
            {name: '计算机与科学技术'},
            {name: '电子信息工程'}
        ];
        var data3 = [
            {name: '能源工程'},
            {name: '机械制造与自动化技术'},
            {name:'车辆工程'}
        ];
        var data4 = [
            {name: '经济学'},
            {name: '管理学'},
            {name: '经济与管理学'}
        ]
        function creatOption2(parentID, data) {
            var parentID = document.getElementById(parentID);
            // 清空原来select，否则会叠加
            parentID.options.length = 0;
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = data[i].name;
                parentID.appendChild(opt);
            }
        }

        var selected = document.querySelector('#select');
        selected.onchange = function() {
            var j = document.getElementById('select').value
            while (j != '所在学院') {
                if (j == '信息与电子工程学院') {
                    creatOption2('select2', data2);
                    return;
                } else if (j == '机械与能源工程学院') {
                    creatOption2('select2', data3);
                    return;
                } else {
                    creatOption2('select2', data4);
                    return;
                }
            }
        }

        var phone = document.querySelector('#phone');
        phone.onblur = function() {
            var filter = /^0?(13[0-9]|14[579]|15[012356789]|16[6]|17[013678]|18[0-9]|19[89]|14[57])[0-9]{8}$/;
            if(!filter.test(phone.value)){ 
                document.querySelector('#phone_span').innerText = '手机号码有误';
                phone.focus();
            } else {
                document.querySelector('#phone_span').innerText = '';
            }
        }

        var email = document.querySelector('#email');
        email.onblur = function() {
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(!filter.test(email.value)){ 
                document.querySelector('#email_span').innerText = '邮箱号码有误';
                email.focus();
            } else {
                document.querySelector('#email_span').innerText = '';
            }
        }

        window.onload = function ()
        {
            var main = document.getElementById ('textarea');
            main.onkeyup = function ()
            {
                document.getElementById('text_span').innerText = 40 - this.value.length; 
            }
        }

        var title_span2 = document.getElementById("title_span2");
        timemove();
        function timemove() {
            var date = new Date();
            var year = date.getFullYear();
            var mth = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            var time = "现在是" + year + "年" + mth + "月" + d + "日" + h + ":" + m + ":" + s;
            setInterval(timemove, 1000);
            title_span2.innerHTML = time;
        }
        
        function check() {
            var content1 = username.value;
            var content2 = document.querySelector('#select3').value;
            var content3 = document.getElementsByName('sex');
            var content31;
            for (var i = 0; i < content3.length; i++) {
                if (content3[i].checked == true) {
                    content31 = content3[i].value;
                }
            }
            var content4 = selected.value;
            var content5 = document.getElementById('select2').value;
            var content6 = document.getElementsByName('sports');
            var content61 = '';
            for (var i = 0; i < content6.length; i++) {
                if (content6[i].checked == true) {
                    content61 =  content6[i].value + ',' + content61;
                }
            }
            var content7 = phone.value;
            var content8 = email.value;
            var content9 = document.getElementById ('textarea').value;
            var show = document.querySelector('.other');
            if (content1.length != 0 && content2 != '年龄' && content4 != '所在学院' && content5 != '所在专业' && typeof(content31) != undefined) {
                show.innerHTML = content1 + ';' + content2 + ';' + content31 + ';' + content4 + ';' + content5 + ';' + content61 + '<br>' + content7 + '<br>' + content8 + '<br>' + content9;
            }
            // 假提交，为了不刷新该页面
            return false;
        }
    </script>


</body>
</html>