JavaScript小练习：制作一个简易的注册页面

要求：用户可以填写用户名，密码，性别，爱好，籍贯，个人描述。其中用户名，密码，性别，籍贯为必填项，在必填项之前有红色的*号标注，若必填项没有填写，则点击注册按钮后，必填项后面会显示红色的提示文本。效果图：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta htt

声微-饭否

5822人浏览 · 2022-04-26 00:17:45

声微-饭否 · 2022-04-26 00:17:45 发布

要求：用户可以填写用户名，密码，性别，爱好，籍贯，个人描述。其中用户名，密码，性别，籍贯为必填项，在必填项之前有红色的 * 号标注，若必填项没有填写，则点击注册按钮后，必填项后面会显示红色的提示文本。

效果图：

代码：

<!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>注册页面</title>
    <style>
        .req{
            color: red;
        }
        .miaoshu{
            float: left;
        }
        
    </style>
</head>
<body>
    <h2>注册</h2>
    <span class="req">*</span>
    <b>用户名：</b><input type="text" id="username">
    <span id="username_msg" class="req"></span><br><br>
    <span class="req">*</span>
    <b>密&nbsp;&nbsp;&nbsp;码：</b><input type="password" id="password">
    <span id="password_msg" class="req"></span><br><br>
    <span class="req">*</span>
    <b>籍&nbsp;&nbsp;&nbsp;贯：</b>
    <select id="native">
        <option value="-1">===请选择===</option>
        <option value="01">北京</option>
        <option value="02">上海</option>
        <option value="03">米奇妙妙屋</option>
    </select><span id="native_msg" class="req"></span>
    <br><br>
    <span class="req">*</span><b>性&nbsp;&nbsp;&nbsp;别: </b>
    <input type="radio" value="0" name="gender">女 &nbsp;&nbsp;&nbsp;  
    <input type="radio" value="1" name="gender">男
    <span id="gender_msg" class="req"></span>
    <br><br>
    <b>爱&nbsp;&nbsp;&nbsp;好: </b>
    <input type="checkbox" value="dy" name="like">抖音
    <input type="checkbox" value="cj" name="like">吃鸡
    <input type="checkbox" value="wzry" name="like">王者荣耀
    <span id="hobby_msg" class="req"></span><br><br>

    <b class="miaoshu">自我描述：</b>
    <textarea id="descrip" cols="30" rows="10"></textarea>
    <span id="descrip_msg" class="req"></span><br> 
    
    <input type="button" value="注册" style="margin: 20px 0 0 100px ;" id="reg">
</body>
<script>
    document.getElementById("reg").onclick = function () {

            let usernameObj = document.getElementById("username")
            let passwordObj = document.getElementById("password")
            let nativeObj = document.getElementById("native")
            let descripObj = document.getElementById("descrip")
            let genderObjs = document.getElementsByName("gender")
            let likeObjs = document.getElementsByName("like")
            

            //校验标识，true表示校验通过，false表示校验未通过
            let checked = true
            //trim(): 将字符串左右两侧的空格去掉

            if (usernameObj.value.trim() === ""){ 
                document.getElementById("username_msg").innerText = "请填写用户名！"
                checked = false
            }else{
                document.getElementById("username_msg").innerText = ""
            }

            if (passwordObj.value.trim() === ""){ 
                document.getElementById("password_msg").innerText = "请填写密码！"
                checked = false
            }else{
                document.getElementById("password_msg").innerText = ""
            }

            if (nativeObj.value.trim() === "-1"){ 
                document.getElementById("native_msg").innerText = "请选择籍贯！"
                checked = false
            }else{
                document.getElementById("native_msg").innerText = ""
            }

            /*
            *获取性别，步骤：
             1.判断哪个标签选中了
             2.将选中的标签的值取出，赋给变量
             3.如果做非空校验，就判断该变量，如果该变量为空，说明没勾选，就给出提示
            */
           //两种方法做性别的非空校验
           //第一种方法
            let gender = ""
            //if (genderObjs[0].checked ) { //如果勾选女
            //    gender = genderObjs[0].value //就取出女的值，赋给gender
            //}else if(genderObjs[1].checked){ //如果勾选男
            //    gender = genderObjs[1].value //就取出男的值，赋给gender
            //}
            //第二种方法
            //应用场景：当选项多于三个时，推荐使用下面方法，选项越多，越体现其好处           
            for (let item of genderObjs) {
                if (item.checked) { //判断该标签是否勾选
                    gender = item.value; //如果勾选，就将该标签的值取出，赋给gender
                    break //如果第一个标签就勾选了，那么就没有必要循环后面的标签，因为是单选
                }  
            }

            if (gender ==="") {
                document.getElementById("gender_msg").innerText = "请选择性别！"
                checked = false
            }else{
                document.getElementById("gender_msg").innerText = ""
            }

            if( !checked ){// 校验未通过时，停止运行
                console.log("停止运行")
                return
            }
            
            console.log("username:",usernameObj.value)
            console.log("password:",passwordObj.value)            
            console.log("native:",nativeObj.value)        
            console.log("descrip:",descripObj.value)           
            console.log("gender:",gender)

            let likes = []
            for (let item of likeObjs) { //循环dom数组
                if (item.checked) { //判断dom是否选中
                    likes.push(item.value) //如果选中，取出dom的值，放入数组中
                }                
            }
            console.log("likes:",likes)

        } 
</script>
</html>