JavaScript 小实例 - 表单输入内容检测，对页面的增删改

效果体验地址：https://xpwi.github.io/js/JavaScript01/jsForm.html

功能：

1.向页面写入数据
2.删除页面数据 + 删除提示【确实】才删除
3.获取表单输入的内容，并简单验证
4.打开一个新的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 简单应用</title>
    <script>
        //欢迎弹出框 默认直接执行
        document.write("<h2 id = 'biaoti'>\n" +
            "    Welcome！\n" +
            "</h2>")

        //添加你好
        function tianji(){
            alert("欢迎来到我的个人网站！")
            document.getElementById("biaoti").append("你好！")
        }

        // 再见提示
        function zaijian() {
            alert("您要走了？下次别来了")
        }
    </script>


    <script>
        //表单验证
        function tishi() {
            // 获取输入的值（通过name)
            var num = document.myform.num.value;
            alert(num);

            // 获取输入的值（通过 id)
            var buben = document.getElementById("buben").value;
            alert(buben);

            // 获取【已选中的】多选框的值
            var xingqu = "";
            for (var i=0;i<document.myform.aihao.length;i++){
                if (document.myform.aihao[i].checked){
                    // 判断是不是最后一个，是的话，不加逗号，不是的话加上逗号
                    if (i == document.myform.aihao.length-1) {
                        xingqu += document.myform.aihao[i].value;
                    }else{
                        xingqu += document.myform.aihao[i].value + ",";
                    }

                }

            }
            alert(xingqu);

        }
    </script>


    <script>
        //确认删除？
        function queren() {
            if (window.confirm("确认删除？")){
                document.getElementById("wenben").innerText = ""
            }
        }

    </script>

    <script>
        //打开新窗口
        function dakai(url){
            window.open(url,"页面标题","width=500, height=300,scrollbars=yes,resizable=no")
        }
    </script>
</head>

<!--onunload 关闭窗口是执行-->
<body onunload="zaijian()">

<!--点击触发添加：你好！-->
<button onclick=tianji() style="color: brown">添加【你好！】</button>
<hr>
<!--表单验证-->
<form action="" method="post" name="myform" onsubmit="tishi()">
    编号：<input type="text" name="num" value="01212"><br>
    姓名：<input type="text" name="username" value="请输入姓名"><br>
    密码：<input type="password" name="pwd" value="请输入密码"><br>
    性别：<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女<br>
    部门：
    <select id="buben">
        <option value="技术部">技术部</option>
        <option value="销售部" SELECTED>销售部</option>
        <option value="财务部">财务部</option>
    </select><br>
    兴趣：
    <input type="checkbox" name="aihao" value="游泳">游泳
    <input type="checkbox" name="aihao" value="唱歌">唱歌
    <input type="checkbox" name="aihao" value="编程">编程
    <input type="checkbox" name="aihao" value="博客" checked>博客
    <br>

    说明：<textarea name="shuoming" cols="30" rows="3">
个人博客：cnblogs.com/xpwi
</textarea><br>
    <input type="submit" value="点击【注册】" style="color: brown"> <input type="reset" value="重置">


</form>
<hr>
<p id="wenben">
    嘻嘻哈哈猴
</p>
<button style="color: brown" onclick="queren()">点击【删除】</button>

<br>
<hr>

<!--打开小页面-->
<form>
    <p style="color: brown">请选择【小页面】：</p>
    <select name="" onchange="dakai(this.value)">
        <option value="“">请选择：</option>
        <option value="h01Biaodan.html">h01Biaodan.html：注册表单页面</option>
        <option value="h02Js.html">h02Js.html：js 提示框，简单触发事件，写入 DOM</option>
        <option value="h03JsShuchu.html">h03JsShuchu.html：js 提示输入信息，获取输入的信息，判断输入信息</option>
    </select>

</form>
</body>
</html>

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

猜你喜欢