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. depmod -a

    分析可加载模块的依赖性,生成modules.dep文件和映射文件 intelligent bash: ' while true;do grep "reading error" ue ...

  2. python附录-re.py模块源码（含re官方文档链接）

    re模块 python官方文档链接:https://docs.python.org/zh-cn/3/library/re.html re模块源码 r"""Support ...

  3. .NET 知识点总结

    对于Web系统开发来说,Net其实也是有好多知识点需要学的,虽然目前JAVA是主流,就业市场比较大,但Net也在积极的拥抱开源,大Net Core 2 出来了,这无疑给Net开发者带来更大的希望,好了 ...

  4. java service wrapper将java程序包装成系统服务（一）

    一. 概述 使用java语言开发应用程序,在windows平台下,一般存在3种应用形式: 1. web应用.web应用多数打成war包在web容器(如tomcat,jetty等)中运行. 2. 桌面应 ...

  5. javascript绑定事件addEventListener与attachEvent

    1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...

  6. 《LeetBook》leetcode题解(4): Median of Two Sorted Arrays[H]——两个有序数组中值问题

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  7. java7之Special Methods

    1.关于<init>与<clinit> At the level of the Java Virtual Machine, every constructor written ...

  8. Ubuntu 16.04 RTL8111/8168/8411 PCI Express Gigabit Ethernet Controller” 不能上网

    来源:http://forum.ubuntu.org.cn/viewtopic.php?f=116&t=463646 1.执行如下命令 uname -a sudo lspci -knn sud ...

  9. python笔记03-----文件操作

    文件操作 创建一个文件名字为filename 内容是 BJSHGDTW 打印文件编码 f = open("filename",'r',encoding="utf-8&qu ...

  10. PHP之string之wordwrap()函数使用

    wordwrap (PHP 4 >= 4.0.2, PHP 5, PHP 7) wordwrap - Wraps a string to a given number of characters ...