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. .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以 ...

  2. jsp页面struts2标签展示clob类型的数据

    直接从数据库中查出来的数据,是clob类型的在前端页面展示的时候是这样: 后来找到了一个方法,在action中添加一个方法,解析转换clob数据的方法 public String getClob(Cl ...

  3. iterm自动登录ssh脚本

    经常在工作中需要切换到不同的服务器去部署,或者查看日志,每次登录都要去找对应的IP和地址,非常麻烦,最终决定使用iterm2+脚本来实现自动登录. 1.iterm2(下载安装不再介绍http://ww ...

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

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

  5. Hive初始

    一.Hive概念 二.为什么要是用Hive 三.Hive优缺点 四.hive架构 一.Hive概念 Hive最初是应Facebook每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的 ...

  6. 2-6 js基础-ajax

    1.var oAjax=new XmlHttpRequest()//创建一个ajax对象,兼容非ie6 var oAjax=new ActiveXObject('Microsoft.XMLHTTP') ...

  7. Spring AMQP

    Spring AMQP 是基于 Spring 框架的AMQP消息解决方案,提供模板化的发送和接收消息的抽象层,提供基于消息驱动的 POJO的消息监听等,很大方便我们使用RabbitMQ程序的相关开发. ...

  8. spark2.4+elasticsearch６.1.1搭建一个推荐系统

    目录 整体框架 安装相关的组件 elasticsearch安装 spark安装 下载es-hadoop中间件 安装计算向量相似度的elasticsearch插件 运行 结果展示 参考博客 本博文详细记 ...

  9. nodejs学习笔记二（get请求、post请求、 querystring模块，url模块）

    请求数据 前台:form.ajax.jsonp 后台:接受请求并返回响应数据     前台<= http协议 =>后台   常用的请求的方式: 1.GET           数据在url ...

  10. 玩转树莓派《二》——用python实现动画与多媒体

    环境:树莓派,系统raspbian,系统自带两个版本的python以及pygame. 1.画板 程序如下: !/home/pi/game_1.py import pygame width = 640 ...