JavaScript 小实例 - 表单输入内容检测,对页面的增删改
2018-11-03 21:05
357 查看
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实例
- 项目总结一:页面弹出框+表单输入与校验形式,实现添加内容到页面
- JavaScript 完成注册页面表单校验的实例
- javascript 输入内容检测(正则表达式方法)不使用弹出窗口提示方法
- web项目中页面表单输入的中文内容进行编码转换至UTF-8
- 一个检测表单数据的JavaScript实例
- #在一个文本框中输入“sdfsf”等内容,提交表单后,页面出现错误,不知怎样可以捕获这个异常?
- php学习笔记(十六)登录页面实例-输入检查和粘性表单
- javascript 页面输入内容的检查与判断方法
- 每天一个JavaScript实例-检测表单数据
- 关于HTML在input标签内检测输入内容合法性和在js验证表单合法性后跳转到servlet的几点内容
- puppeteer 实例:自动输入表单并提交搜索显示新的页面
- 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面
- 当页面类似于表单,有很多需要输入的内容,就需要做上下滚动的效果
- javascript 表单输入内容限制
- Javascript实现4种--弹出确认_取消框,和刷新页面清楚 输入框中之前输入的内容
- JavaScript split() 方法加上哈希函数实现表单输入框内容是否重复的判断
- 一个简单的注册表单验证保持原来输入的内容实例
- JavaScript中使用document.write向页面输出内容实例