JavaScript表单校验 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            function check() {
                var userName = document.getElementById("user_name").value;
                if (""==userName){
                        alert("请输入用户名");
                        return false;
                    }
                var password = document.getElementById("password").value;
                if (""==password){
                        alert("请输入密码");
                        return false;
                    }

                var summary = document.getElementById("summary").value;
                // ""空是未选择，null是赋值为空
                if (""==summary){
                    alert("请输入简介");
                    return false;
                }

                var flag = false;
                var radioes = document.getElementsByName("sex");
                for (var i = 0; i < radioes.length; i++) {
                     var radio = radioes[i];
                     if (radio.checked){
                         // console.log(radio.value);
                         flag=true;
                         break;
                     }
                }
                if (!flag){
                    alert("请输入性别");
                    return false;
                }

                var flag2=false;
                var hobbies=document.getElementsByName("hobby");
                for (var i = 0; i < hobbies.length; i++) {
                    var hobby = hobbies[i];
                    if (hobby.checked){
                        console.log(hobby.value);
                        flag2=true;
                    }
                }
                if (!flag2){
                    alert("请输入爱好");
                    return false;
                }

                var flag3=false;
                var options=document.getElementById("city").options;
                for (var i = 0; i < options.length; i++) {
                    var option = options[i];
                    var value = option.value;
                    if (option.selected && ""!=value){
                        console.log(option.value);
                        flag3=true;
                    }
                }
                if (!flag3){
                    alert("请选择城市");
                    return false;
                }

                // console.log(radioes.length);

                //input对象无options，select对象有options
                return false;
            }
        </script>
        <form action="" onsubmit="return check()">
            <input type="text" id="user_name"/>
            <input type="password" id="password">
            <textarea id="summary" placeholder="请输入简介"></textarea>
            <input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女

            <input type="checkbox" name="hobby" value="0">篮球
            <input type="checkbox" name="hobby" value="1">足球
            <input type="checkbox" name="hobby" value="2">乒乓球

            <select id="city">
                <option value="">---请选择---</option>
                <option value="1">郑州市</option>
                <option value="2">河南省</option>
            </select>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

 

posted @ 2021-06-07 20:35  程序新人小刘  阅读(53)  评论(0)    收藏  举报