【第38天】JavaScript的页面元素控制、表单验证

最新推荐文章于 2022-07-11 11:38:34 发布

來秋

最新推荐文章于 2022-07-11 11:38:34 发布

阅读量215

点赞数

分类专栏：培训日记文章标签： Java Script

本文链接：https://blog.csdn.net/qq_30257081/article/details/85238363

版权

培训日记专栏收录该内容

49 篇文章 3 订阅

订阅专栏

1 页面元素控制
2 表单验证

1 页面元素控制

一个语言，封装层数越高，方法越多，这个语言越高级，但运行效率低；一个语言封装层数越少，方法越少，属性也就越多，这个语言越低级，但运行效率高。
在书写页面时，必须严格按照以下顺序书写：先将结构（HTML）建立好，形成标准的文档流。再写好样式（CSS），最后定义动作（JS）。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>页面元素控制</title>
        <style>
            div#container{
                margin:0 auto;
                width:600px;
                height:800px;
                border-radius:25px;
                background-color: gray;
                box-shadow:15px 15px 15px silver;
                text-align: center;
                border:solid 1px gray;
            }

            h2{
                font-family:楷体;
                color:silver;
                margin-top: 50px;
            }

        </style>
    </head>
    <body>
        
        <div id="container">
            <h2>当冬夜渐暖</h2>
            <hr>
            <span id="showImg"></span>
            <br>
            <button onclick="show()">显示专辑封面</button>
            <br>
            <a href="#" onclick="buy()">购买此专辑</a>
        </div>
        <script>
            function show(){
                //根据标签名拿取多个元素
                //此方法返回的是一个数组[0]表示拿取唯一一个                
                let dom_sp = document.getElementsByTagName("span")[0];
                //根据id拿取元素
                //document.getElementById("showImg");
                //修改元素内部结构
                dom_sp.innerHTML = "<img src='image/Cover.jpg' />";
            }

            function buy(){
                //获取所有a标签，取出第一个a标签
                let dom_a = document.getElementsByTagName("a")[0];
                //可选择式对话框
                /*
                * confirm()可选择式对话框
                * 注意点击确定走第一分支
                * 取消第二分支
                * */
                if(confirm("您是否要购买此专辑")){
                    //使用BOM对象将网页定位到另外的页面
                    location.href="suc.html";
                }else{
                    //修改元素内部的属性
                    dom_a.href="err.html";
                }
            }
        </script>
    </body>
</html>

suc.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>购买成功</title>
        <style>
            div#msg{
                width:300px;
                height:70px;
                background-color: #ffa2a5;
                border:solid 2px red;
                border-radius:20px;
                padding:10px;
                display:none;
            }
        </style>
        <link rel="stylesheet"
        href="#" id="mylink">
    </head>
    <body>
        购买成功，感谢支持！
        <form action="#" method="get">
            <label for="idcard">输入卡号:</label>
            <input type="password" name="idcard"
            id="idcard"/>
            <br>
            <label for="password">支付密码:</label>
            <input type="password" name="password" id="password" />
            <br>
            <!--
                如果要使用JS来修改元素的CSS样式，则可以通过.style属性
                元素.style.样式名 = 样式值
                鼠标划过多选框checkbox会显示div#msg这个元素
            -->
            记住密码: <input type="checkbox" name="rem" 
            onmouseover="document.getElementById('msg').style.display='block'"
            onmouseout="document.getElementById('msg').style.display='none'"/>
            <div id="msg">如果您在公共场合开启此功能，有可能
            对您的计算机造成严重的安全隐患，请谨慎开启此功能</div>
        </form>

        <!-- 点击按钮后 粉色背景 深蓝字体 -->
        <button onclick="change('flag1')">切换主题1</button>
        <!-- 点击按钮后 浅蓝背景 橙色字体 -->
        <button onclick="change('flag2')">切换主题2</button>

        <script>
            let dom_link = document.getElementById("mylink");

            function change(value){
                if(value=='flag1'){
                    dom_link.href = "css/style1.css";
                }

                if(value=='flag2'){
                    dom_link.href = "css/style2.css";
                }
            }

        </script>
    </body>
</html>

css/style1.css

body{
    background-color: pink;
    color: darkblue;
}

css/style2.css

body{
    background-color: orange;
    color: lightblue;
}

err.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
	    <title>购买失败</title>
	</head>
	<body>
	    继续挑选其它专辑
	</body>
</html>

（点击购买时的截图）
在这里插入图片描述

（上面的图点击确定后跳转的页面，鼠标在多选框上时的截图）
在这里插入图片描述

2 表单验证

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>表单验证</title>
    </head>
    <body>
        <!--
            onsubmit:表单提交时
            如果后面存在return 函数
            则函数必须返回true表单才可以提交
        -->
        <form action="getElement6.html" method="get"
              onsubmit="return checkAll()">
            <!--
                1:单行文本输入框
                    用户名在4到8位之间
            -->
            <label for="nameid">用户姓名:</label>
            <input autocomplete="off" id="nameid"
                   name="name" onblur="checkName()"
                   placeholder="用户名必须在4到8位之间" required
                   type="text"/>
            <span id="name_msg"></span>
            <br>
            <!--
                2:单行文本密码框
                    用户密码在4到8位之间
                this:关键字，表示本元素，注意书写在哪个元素中，就表示
                此元素
            -->
            <label for="passid">用户密码:</label>
            <input autocomplete="off" id="passid"
                   name="pass" onblur="checkPass(this.value)" placeholder="用户密码必须在4到8位之间"
                   required
                   type="password"/>
            <span id="pass_msg"></span>
            <br>

            <!--
                 3:多选框
                   爱好不能少于3个
            -->
            爱好: <input name="hobby" onclick="checkHobby()"
                       type="checkbox" value="soccer"/>足球

            <input name="hobby" onclick="checkHobby()"
                   type="checkbox" value="travel"/>旅行

            <input name="hobby" onclick="checkHobby()"
                   type="checkbox" value="read"/>阅读

            <input name="hobby" onclick="checkHobby()"
                   type="checkbox" value="running"/>跑步

            <input name="hobby" onclick="checkHobby()"
                   type="checkbox" value="code"/>敲代码
            <span id="hobby_msg"></span>
            <br>
            <!--
                4:多行文本输入框
                    最多输入140个字符
                    cols:表示一行多少个字符
                    rows:表示可以书写几行
                    onkeyup:键盘键位抬起
                    onkeydown:键盘键位落下
            -->
            <label for="weibo">您有什么新鲜事告诉大家:</label>
            <textarea cols="40" id="weibo"
                      name="weibo" oncopy="return false"
                      oncut="return false"
                      onkeyup="checkText(this.value)"
                      onpaste="return false"
                      rows="5"></textarea>
            <span id="msg"></span>


            <input type="submit" value="提交"/>
            <input type="reset" value="取消"/>
        </form>


        <script>

            let flagName = false;
            let flagPass = false;
            let flagCheck = false;
            let flagText = false;

            function checkName() {
                //拿取input
                let dom_input = document.getElementById("nameid");

                //拿取span
                let dom_sp = document.getElementById("name_msg");

                if (dom_input.value.length < 4 ||
                    dom_input.value.length > 8) {
                    dom_sp.style.color = "red";
                    dom_sp.innerHTML = "<img src='image/wrong.png'>用户名不能小于4位或者大于8位";
                    flagName = false;
                    return;
                }
                dom_sp.style.color = "green";
                dom_sp.innerHTML = "<img src='image/right.png'>用户名符合要求";
                flagName = true;
            }

            function checkPass(flag) {
                let dom_sp = document.getElementById("pass_msg");
                if (flag.length < 4 || flag.length > 8) {
                    dom_sp.style.color = "red";
                    dom_sp.innerHTML = "<img src='image/wrong.png'>用户密码不能小于4位或者大于8位";
                    flagPass = false;
                    return;
                }
                dom_sp.style.color = "green";
                dom_sp.innerHTML = "<img src='image/right.png'>用户密码符合要求";
                flagPass = true;
            }


            function checkHobby() {
                let count = 0;
                //拿取span
                let dom_sp = document.getElementById("hobby_msg");

                //根据name拿取多个元素
                let dom_hobby = document.getElementsByName("hobby");

                for (let value of dom_hobby) {
                    //如果某一个被选中了
                    if (value.checked) {
                        count++;
                    }
                }

                if (count < 3) {
                    dom_sp.innerHTML = "爱好不能少于3个";
                    dom_sp.style.color = "red";
                    flagCheck = false;
                } else {
                    dom_sp.innerHTML = "爱好广泛";
                    dom_sp.style.color = "green";
                    flagCheck = true;
                }
            }

            function checkText(value) {
                let dom_sp = document.getElementById("msg");

                if (value.length <= 140) {
                    dom_sp.style.color = "green";
                    dom_sp.innerHTML = "您还可以输入" + (140 - value.length) + "个字符";
                    flagText = true;
                    return;
                }
                flagText = false;
                dom_sp.style.color = "red";
                dom_sp.innerHTML = "您已经超过" + (value.length - 140) + "个字符";
            }

            function checkAll() {
                return flagName && flagPass && flagCheck && flagText;
            }

        </script>
    </body>
</html>