JavaScript 小实例 - 表单输入内容检测，对页面的增删改
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>
