JavaScript 小例項 - 表單輸入內容檢測，對頁面的增刪改
阿新 • • 發佈：2018-11-03
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>