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. 判断IE浏览器的版本号

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...

  2. 厉害了，七牛云 CEO 来讲架构了！

    说起许式伟,你应该不陌生,他是七牛云的CEO,ECUG 社区发起人,国内 Go 语言圈的领军人物,曾就职于金山.盛大,有超过 10 年的搜索和分布式存储相关技术的研发经验. 他的个人经历颇为传奇,大学 ...

  3. CentOS 7下安装RabbitMQ

    下载erlang:http://www.erlang.org/downloads ,otp_src_20.3.tar.gz 下载RabbitMQ: http://www.rabbitmq.com ,r ...

  4. Altium Designer安装孔周围放置圆形Polygon Pour Cutout

    1.  在Keep-Out层画2个圆, 中间的圆用作安装孔, 外圆做为禁止覆铜层. 这样做的好处是,放好安装孔后, 外面禁止覆铜层也覆不上铜, 防止螺钉与覆铜接触. 2. 选中外圆, Tools -& ...

  5. android常用Linux命令

    安卓下面有个软件叫终端模拟器,其实就是Linux下的命令行,使用这些命令能有效处理问题. 1.基本知识 “/”,这个英文字母斜杠指的是根目录,类似Windows的C:\,但是Linux下只有一个根目录 ...

  6. master线程的主循环,后台循环,刷新循环,暂停循环

    InnoDB存储引擎的主要工作都是在一个单独的后台线程master thread中完成的.master thread的线程优先级别最高.其内部由几个循环(loop)组成:主循环(loop).后台循环( ...

  7. R语言变量赋值

    变量可以使用向左,向右且等于操作符来分配值.可以使用 print() 或 cat() 函数打印变量的值.cat() 函数将多个项目并成连续并打印输出. # Assignment using equal ...

  8. Java责任链模式

    责任链模式 顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计 ...

  9. ACM,算法

    ACM,算法 描述 最近Topcoder的XD遇到了一个难题,倘若一个数的三次方的后三位是111,他把这样的数称为小光棍数.他已经知道了第一个小光棍数是471,471的三次方是104487111,现在 ...

  10. 关于Hall定理的学习

    基本定义 \(Hall\) 定理是二分图匹配的相关定理 用于判断二分图是否存在完美匹配 存在完美匹配的二分图即满足最大匹配数为 \(min(|X|,|Y|)\) 的二分图,也就是至少有一边的点全部被匹 ...