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 小实例 - 表单输入内容检测，对页面的增删改的更多相关文章

  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. Scrum Meeting 汇总

    Alpha [Alpha]Scrum Meeting 0&1 [Alpha]Scrum Meeting 2 [Alpha]Scrum Meeting 3 [Alpha]Scrum Meetin ...

  2. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  3. 在linux上安装 sql server for linux

    在linux上安装 sql server for linux Install SQL Server on Red Hat Enterprise Linux Install SQL Server To ...

  4. (转)mysql、innodb和加锁分析

    mysql.innodb和加锁分析 原文:https://liuzhengyang.github.io/2016/09/25/mysqlinnodb/ 介绍 本文主要介绍MySQL和InnoDB存储引 ...

  5. web前端优化之reflow(减少页面的回流)

    1.什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程. 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手. 以 ...

  6. SpringBoot集成WebSocket【基于STOMP协议】进行点对点[一对一]和广播[一对多]实时推送

    原文详细地址,有点对点,还有广播的推送:https://blog.csdn.net/ouyzc/article/details/79884688 下面是自己处理的一些小bug 参考原文demo,结合工 ...

  7. rpm: error while loading shared libraries: libgcc_s.so.1: cannot open shared object file: No such file or directory解决办法

    不多说,直接上干货! 问题详情 [root@bigdatamaster app]# rpm -qa | grep gcc rpm: error : cannot open shared object ...

  8. Scope of a Declaration

    6.3. Scope of a Declaration The scope of a declaration of a member m declared in or inherited by an ...

  9. eclipse中提示js或者JQuery代码

    当你在eclipse中的JSP中写JavaScript或者JQuery代码的时候,eclipse是不会自动提示的,所以你需要在eclipse中安装一下插件,该插件的名字叫:Spket IDE,它可以作 ...

  10. python-thread多线程

    #!/usr/bin/python import threading,time def Music(): print "music is playing" time.sleep(3 ...