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

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

功能：

  • 1.向页面写入数据
  • 2.删除页面数据 + 删除提示【确实】才删除
  • 3.获取表单输入的内容，并简单验证
  • 4.打开一个新的窗口
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js 简单应用</title>
  6.     <script>
  7.         //欢迎弹出框 默认直接执行
  8.         document.write("<h2 id = 'biaoti'>\n" +
  9.             "    Welcome！\n" +
  10.             "</h2>")
  12.         //添加你好
  13.         function tianji(){
  14.             alert("欢迎来到我的个人网站！")
  15.             document.getElementById("biaoti").append("你好！")
  16.         }
  18.         // 再见提示
  19.         function zaijian() {
  20.             alert("您要走了？下次别来了")
  21.         }
  22.     </script>
  24.     <script>
  25.         //表单验证
  26.         function tishi() {
  27.             // 获取输入的值（通过name)
  28.             var num = document.myform.num.value;
  29.             alert(num);
  31.             // 获取输入的值（通过 id)
  32.             var buben = document.getElementById("buben").value;
  33.             alert(buben);
  35.             // 获取【已选中的】多选框的值
  36.             var xingqu = "";
  37.             for (var i=0;i<document.myform.aihao.length;i++){
  38.                 if (document.myform.aihao[i].checked){
  39.                     // 判断是不是最后一个，是的话，不加逗号，不是的话加上逗号
  40.                     if (i == document.myform.aihao.length-1) {
  41.                         xingqu += document.myform.aihao[i].value;
  42.                     }else{
  43.                         xingqu += document.myform.aihao[i].value + ",";
  44.                     }
  46.                 }
  48.             }
  49.             alert(xingqu);
  51.         }
  52.     </script>
  54.     <script>
  55.         //确认删除？
  56.         function queren() {
  57.             if (window.confirm("确认删除？")){
  58.                 document.getElementById("wenben").innerText = ""
  59.             }
  60.         }
  62.     </script>
  64.     <script>
  65.         //打开新窗口
  66.         function dakai(url){
  67.             window.open(url,"页面标题","width=500, height=300,scrollbars=yes,resizable=no")
  68.         }
  69.     </script>
  70. </head>
  72. <!--onunload 关闭窗口是执行-->
  73. <body onunload="zaijian()">
  75. <!--点击触发添加：你好！-->
  76. <button onclick=tianji() style="color: brown">添加【你好！】</button>
  77. <hr>
  78. <!--表单验证-->
  79. <form action="" method="post" name="myform" onsubmit="tishi()">
  80.     编号：<input type="text" name="num" value="01212"><br>
  81.     姓名：<input type="text" name="username" value="请输入姓名"><br>
  82.     密码：<input type="password" name="pwd" value="请输入密码"><br>
  83.     性别：<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女<br>
  84.     部门：
  85.     <select id="buben">
  86.         <option value="技术部">技术部</option>
  87.         <option value="销售部" SELECTED>销售部</option>
  88.         <option value="财务部">财务部</option>
  89.     </select><br>
  90.     兴趣：
  91.     <input type="checkbox" name="aihao" value="游泳">游泳
  92.     <input type="checkbox" name="aihao" value="唱歌">唱歌
  93.     <input type="checkbox" name="aihao" value="编程">编程
  94.     <input type="checkbox" name="aihao" value="博客" checked>博客
  95.     <br>
  97.     说明：<textarea name="shuoming" cols="30" rows="3">
  98. 个人博客：cnblogs.com/xpwi
  99. </textarea><br>
  100.     <input type="submit" value="点击【注册】" style="color: brown"> <input type="reset" value="重置">
  102. </form>
  103. <hr>
  104. <p id="wenben">
  105.     嘻嘻哈哈猴
  106. </p>
  107. <button style="color: brown" onclick="queren()">点击【删除】</button>
  109. <br>
  110. <hr>
  112. <!--打开小页面-->
  113. <form>
  114.     <p style="color: brown">请选择【小页面】：</p>
  115.     <select name="" onchange="dakai(this.value)">
  116.         <option value="“">请选择：</option>
  117.         <option value="h01Biaodan.html">h01Biaodan.html：注册表单页面</option>
  118.         <option value="h02Js.html">h02Js.html：js 提示框，简单触发事件，写入 DOM</option>
  119.         <option value="h03JsShuchu.html">h03JsShuchu.html：js 提示输入信息，获取输入的信息，判断输入信息</option>
  120.     </select>
  122. </form>
  123. </body>
  124. </html>

JavaScript 小实例 - 表单输入内容检测，对页面的增删改的更多相关文章

  1. 微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）

    js代码 Page({                   /**    * 页面的初始数据    */         data: {         indicatorDots: false,   ...

  2. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  3. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  4. javascript基础 之 表单

    1,js可以验证表单 实例1,js获取表单的内容 //html表单是这样的 <form name="myForm" action="demo_form.php&qu ...

  5. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  6. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  7. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  8. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  9. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

随机推荐

  1. springcloud(八)-Hystrix熔断器

    雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者” ...

  2. mac下抓包工具charles

    图片没带过来,想看截图的可以直接点击有道云笔记的链接: http://note.youdao.com/share/?id=f5c7369a0c1e1e37cdcd08a04d33be7e 1.下载 h ...

  3. 通过数据库绑定的dropdownlist，如何让其第一条默认显示"--请选择--"

    第一种方法 DropDownList1.Items.Insert(0,"请选择XXX"); 第二种方法 在第一个位置插入一个项就可以 DropDownList1.Items.Ins ...

  4. hibernate_Session接口_load_get

    hibernate读取数据库内容,用 1,session.get(Class类型,主键); 立马发出sql语句.从数据库中取出值装到对象里去 2,session.load(Class类型,主键); 从 ...

  5. LINUX 查找替换命令 总结

    find /var/ -name "*.php" > /home/tmp 在/var/目录下查找 所有以.php后缀结尾的文件  结果很多,就 > 输出结果到/home ...

  6. js中一次性注册多个事件

    在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...

  7. Java泛型的协变

    在上篇<Java泛型的基本使用>这篇文章中遗留以下问题,即将子类型也能添加到父类型的泛型中,要实现这种功能必须借助于协变. 实验准备 现在在上篇文章展示的Decorator类型的基础上,增 ...

  8. 从零开始学JAVA(07)-使用SpringMVC4写helloworld

    一.关于开发环境 Eclipse IDE for Java EE Developers Jdk 1.7 (32位版本) SpringMVC 4.1.5.RELEASE apache-tomcat-7. ...

  9. Rsyslog+ELK日志分析系统

    转自:https://www.cnblogs.com/itworks/p/7272740.html Rsyslog+ELK日志分析系统搭建总结1.0(测试环境) 因为工作需求,最近在搭建日志分析系统, ...

  10. mvc手把手教你写excel导入[mvc+三层，没用EF]

    实习狗的每天新知识日常 准备工作: 1.在项目中添加对NPOI的引用,NPOI下载地址:http://npoi.codeplex.com/releases/view/38113 2.NPOI学习系列教 ...