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

功能：

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js 简单应用</title>
 <script>
 //欢迎弹出框 默认直接执行
 document.write("<h2 id = 'biaoti'>
" +
 " Welcome！
" +
 "</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">//欢迎加入全栈开发交流群一起学习交流：864305860
 <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">
欢迎加入全栈开发交流群一起学习交流：864305860
</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>//欢迎加入全栈开发交流群一起学习交流：864305860
复制代码