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. js 弹性导航

    <style> *{margin:0;padding:0;} #box{height:50px;float:left;position:relative;background:#f90;} ...

  2. .NET熔断之Polly

    1. Net Core 中有一个被.Net 基金会认可的库 Polly,可以用来简化熔断降级的处理.主要功能:重试(Retry):断路器(Circuit-breaker):超时检测(Timeout): ...

  3. Jmeter创建FTP测试计划

    创建FTP测试计划 在这一章,你将学习如何创建一个基础的测试计划来测试FTP站点.你将在一个FTP站点上的两个文件中创建四个用户来发送请求.并且,你将告诉用户运行测试两次.所以,总的请求数是(4个用户 ...

  4. XXX is not in the sudoers file. This incident will be reported 的问题解决方案

    不多说,直接上干货! 说的是,这种问题,是出现在ubuntu系统里. root@SparkSingleNode:/usr/local/jdk# pwd /usr/local/jdk root@Spar ...

  5. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  6. Generic-Host 快速使用指南

    .NETCORE 中的 Generic Host 本文以自己在工作中学习和使用.net core generic-host 作一个总结. 前言 在创建的ASPNETCORE项目中,我们可以在Main( ...

  7. SqlHelper---操作数据库

    public class SqlHelper { /// <summary> /// 数据库连接字符串 /// </summary> public static readonl ...

  8. 问题集录--新手入门深度学习，选择TensorFlow 好吗？

    新手入门深度学习,选择 TensorFlow 有哪些益处? 佟达:首先,对于新手来说,TensorFlow的环境配置包装得真心非常好.相较之下,安装Caffe要痛苦的多,如果还要再CUDA环境下配合O ...

  9. C# 之文件拖拽和pixturBox缩放与拖拽

    文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...

  10. Jquery中$与$.fn的区别

    Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...