关于js表单校验提交

最新推荐文章于 2022-04-12 21:48:22 发布
nairuozi
最新推荐文章于 2022-04-12 21:48:22 发布
阅读量93
点赞数
文章标签： JS
本文链接：https://blog.csdn.net/nairuozi/article/details/102924124
版权
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
               
        </script>
        <form onsubmit="return check()" action="http://www.baidu.com">
            <input id="name" placeholder="请输入用户名" />
            <input id="password" type="password" placeholder="请输入密码" />
            <input type="submit" value="登陆" />
        </form>
        <script type="text/javascript">
            function ch(){
                
                var a = document.getElementById("name1");
                if(a.value == "") {
                    alert("请输入用户名");
                    return;
                }
                var b = document.getElementById("password1");
                if(b.value == "") {
                    alert("请输入密码");
                    return;
                }
                var flag=0;
                var c= document.getElementsByName("sex");
                for(var i=0;i<c.length;i++){
                    if(c[i].checked){
                        flag=1;
                        break;
                    }
                }
                if(flag==0){
                    alert("请选择性别");
                    return;
                }
                var flag=0;
                var d= document.getElementsByName("happy");
                for(var i=0;i<c.length;i++){
                    if(d[i].checked){
                        flag=1;
                        break;
                    }
                }
                if(flag==0){
                    alert("请选择爱好");
                    return;
                }
                var e=document.getElementById("two").options;
                for(var i=0;i<c.length;i++){
                    if(e[i].selected && e[i].value==""){
                        alert("请选择年级");
                    }
                }
                
                //document.getElementById("login").submit();
            }
            
        </script>
        <style>
            #button{
                font-style: normal;
                background: red;
            }
        </style>
        <form id="login" action="http://www.baidu.com">
            <input id="name1" placeholder="请输入用户名" />
            <input id="password1" type="password1" placeholder="请输入密码" />
            <input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女
            <input type="checkbox" name="happy" value="0"/>篮球<input type="checkbox" name="happy" value="1"/>足球<input type="checkbox" name="happy" value="2"/>网球
            <select id="two">
                <option value="">--请选择--</option>
                <option value="1">一年级</option>
                <option value="2">二年级</option>
            </select>
            <i id="button" onclick="ch()">登陆</i>
            <i id="reset" onclick="clean()">重置</i>
        </form>
        <script>
            function clean(){
                document.getElementById("reset").addEventListener("click",function(){
                    document.getElementById("login").reset();
                })
            }
        </script>
        <img id="123"/ src="img/0.jpg">
        <input type="button" value="1" class="loop" onclick="set(this,0)"/><input type="button" value="2" class="loop" onclick="set(this,1)"/><input type="button" value="3" class="loop" onclick="set(this,2)"/>
        <script type="text/javascript">
            var i=1;
            function o(){
                
                document.getElementById("123").src="./img/"+i+".jpg";
                i++;
                if(i==3){
                    i=0;
                    //return document.getElementById("123").src="img/2.jpg";
                }
            }
            var id = setInterval("o()",1000);
            function set(obj,i){
                obj.style.backgroundColor="red";
                var n = document.getElementsByClassName("loop");
                for(var k=0;k<n.length;k++){
                    if(n[k].value!=obj.value){
                        n[k].style.backgroundColor="black";
                    }
                    
                }
                document.getElementById("123").src="./img/"+i+".jpg";
                clearInterval(id);
            }
        </script>
        
        
    </body>

</html>
nairuozi
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于js表单校验提交

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascri...
复制链接

扫一扫