JavaScript与 HTML表单的交互过程,想要学习动态网页但是无从下手的新手看看。...

最近开始了 java  web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的  读完本篇文章后相信初学者会有一个

清晰的理解 。。。  对应下面的代码看我写的问题   。

 

    其实表单的交互操作很简单  就是在 提交表单数据的时候调用一个   javascript  所写的函数 ,  注意看我下面所给的代码

 

 这一行    <form name="Form1"onSubmit=" return on_submit() ;"method="post" action="register.jsp" >     

 

注意看阴影地方 有一个 onSubmit 属性 这里将 这个属性设置为     return on_submit() ; 意思就是调用 on_submit() 函数  

 

这个函数就在 <script></script> 中定义        这就是表单提交的原理  ,注意我这里只是说表单整体的提交 ,  如果我们想要判断 表单中

的某个元素 例如   text 也就是文本框的内容是否为  空也就是 "" 那么可以这样 判断在我们 自己写的javascript 函数中 

<script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")            
  /*  这句就是检测文本区输入是否为空如果为空那么返回false 意思就是取消表单的提交注意表单元素name属性区分大小写一定不要写错   */
    {
     alert("用户名不能为空,请输入用户名!");
     return false;
    }

 }
 </script>

 

 

 

具体细节大同小异 ,基本上有一点html基础的 朋友 都能看懂这个交互的过程吧,,,,,希望能帮助 像我一样的新手 。。。写的不好 高手 不要喷我 

对于 html文件表单书写 以及事件的响应建议到 Dreamweaver中 书写    可以有事件提示可以更高效的写程序

<html>
 <script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")
    {
     alert("用户名不能为空,请输入用户名!");
     return false;
    }

 }
 </script>
 <head>
 <title>this  is my first  java script page</title>
 </head>
 <body>用户信息提交 
    <form name="Form1" onSubmit=" return on_submit() ;" method="post" action="register.jsp" >
   用户名:&nbsp;
     <input name="user_name" type="text" maxlength="255" >
     <br>
     密码: &nbsp;&nbsp;
     <input name="user_password" type="text" maxlength="255"   ><br>
     出生日期:<input name="year" size="3" maxlength="4" >年<select> 
     <option selected="selected"> 1</option>
     <option > 2</option>
     <option > 3</option>
     <option > 4</option>
     <option> 5</option>
     <option> 6</option>
     <option> 7</option>
     <option > 8</option>
     <option > 9</option>
     <option > 10</option>
     <option > 11</option>
     <option > 12</option>
     </select>月<input name="day" size="3" maxlength="4"> <br> 
     性别:&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="radio1" >男&nbsp;&nbsp;<input type="radio" name="radio2">女   <br>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="button_sub" value="提  交"> &nbsp;<input type="reset" name="button_reset" value="重  置" >
 </form>
 </body>
 </html>

转载于:https://www.cnblogs.com/yuedongwei/archive/2011/11/07/4145596.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

问题记录之前端路由系统

概要&#xff1a; 公司的一个项目中使用了根据路由配置生成对应的Route&#xff0c;而配置会存在一份在store中&#xff0c;当store中的RouteConfig变化时&#xff0c;会根据最新的配置来生成最新的试图。 因为路由配置系统实现上的一些缺陷本次需要对其就行性能上的一些优化…

vue兼容ie10问题并且node——module中出现es6语法如何解决

一、首先进行安装babel-polyfill&#xff0c;如果你用yarn安装babel-polyfill的话需要yarn add babel-polyfill进行安装 二、在babel.config.js中加入 三、在ie浏览器中找到报错的文件&#xff0c;然后将文件加入其中 转载于:https://www.cnblogs.com/changhuanran/p/11193149.…

2个在Java中将Byte []数组转换为String的示例

将字节数组转换为String似乎很容易&#xff0c;但是很难做到正确。 每当字节转换为String或char时&#xff0c;许多程序员都会犯忽略字符编码的错误&#xff0c;反之亦然。 作为程序员&#xff0c;我们都知道计算机只能理解二进制数据&#xff0c;即0和1。我们看到和使用的所有…

Linux文件IO-例会笔记总结

上周日实验室例会主要涉及linux文件操作的内核实现。主要讨论了linux下对文件进行操作时&#xff0c;系统内部调用了那些函数以及它们是怎么相互配合的。 linux系统是怎样对不同介质和不同的文件系统提供统一的文件操作接口呢&#xff1f;答案是&#xff1a;VFS。系统中所有文件…

js算法初窥03(搜索及去重算法)

前面我们了解了一些常用的排序算法&#xff0c;那么这篇文章我们来看看搜索算法的一些简单实现&#xff0c;我们先来介绍一个我们在实际工作中一定用到过的搜索算法——顺序搜索。 1、顺序搜索 其实顺序搜索十分简单&#xff0c;我们还是以第一篇文章写好的架子作为基础&#…

nginx try_files流程解析

前端部署单页应用时在nginx上经常用到try_files指令&#xff0c;而对于try_files并不知道其所以然&#xff0c;所以花时间整理总结如下。 Syntax: try_files file … uri; try_files file … code; Default: — Context: server, location 根据root和alias指令提供的值按照tr…

javascript中编码与解码的decodeURI()、decodeURIComponent()区别

1、 定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。 从W3C的定义和用法来看&#xff0c;两者没有什么区别&#xff0c;但是两者的参数是有区别的&#xff1a;decodeU…

vb 类模拟 引用

引用&#xff1a;http://wenku.baidu.com/view/f434ea26a5e9856a56126008.html Class1中 Option Explicit Public Sub test() Form1.TextForIpAddressAdd.Text "123"End Sub Form1中 Option Explicit Private test As New Class1 Private Sub Form_Load() 初始化 te…

用js来实现那些数据结构12(散列表)

上一篇写了如何实现简单的Map结构&#xff0c;因为东西太少了不让上首页。好吧。。。 这一篇文章说一下散列表hashMap的实现。那么为什么要使用hashMap&#xff1f;hashMap又有什么优势呢&#xff1f;hashMap是如何检索数据的&#xff1f;我们一点一点的来解答。 在我们学习一门…

如何自定义Hibernate脏检查机制

介绍 在上一篇文章中&#xff0c;我描述了Hibernate自动脏检查机制。 尽管您应该始终喜欢它&#xff0c;但是有时您可能想添加自己的自定义污垢检测策略。 自定义脏检查策略 Hibernate提供以下定制机制&#xff1a; 休眠拦截器#findDirty&#xff08;&#xff09; CustomEnt…

读vue【深入响应式系统】后整理

一直以来对vue的依赖自动追踪的原理很感兴趣&#xff0c;像魔法一样。对于交给vue的对象返回后&#xff0c;在哪里使用了这个返回的对象vue会自动追踪&#xff0c;等这个对象改变时vue会自动通知到之前使用改变量的方法&#xff0c;整个过程和react很不一样&#xff0c;react的…

萌新自我介绍

第一次用博客&#xff0c;多有不会&#xff0c;可能向各位大佬请教&#xff0c;谢谢&#xff01;&#xff01;&#xff01;&#xff01;转载于:https://www.cnblogs.com/fakerOrz/p/11194872.html

使用select一个表更新另一个表(批量更新)

update a set a2b.b2, a3b.b3, ... from b where a.a1b.b1 转载于:https://www.cnblogs.com/haver/articles/2244740.html

用js来实现那些数据结构06(队列)

其实队列跟栈有很多相似的地方&#xff0c;包括其中的一些方法和使用方式&#xff0c;只是队列使用了与栈完全不同的原则&#xff0c;栈是后进先出原则&#xff0c;而队列是先进先出&#xff08;First In First Out&#xff09;。 一、队列 队列是一种特殊的线性表&#xff0c…

探索SwitchYard 2.0.0.Alpha2快速入门

在我的最后一篇文章中&#xff0c;我解释了如何在WildFly 8.1上使用SwitchYard。 同时&#xff0c;该项目很忙&#xff0c;并发布了另一个Alpha2。 这是一个很好的机会&#xff0c;在这里浏览快速入门并刷新您的记忆。 除了版本更改之外&#xff0c;您仍然可以使用较早的博客来…

MySQL之触发器

二&#xff1a;触发器 1. 什么是触发器 触发器&#xff0c;是一段与某个表相关的sql语句&#xff0c;会在某个时间点&#xff0c;满足某个条件后自动触发执行 其中两个关键因素&#xff1a; 时间点 * 事件发生前&#xff0c;before|事件发生后 after事件 * update delete inser…

PowerDesigner使用技巧

PowerDesigner使用MySQL的auto_increment   ◇问题描述&#xff1a;   PD怎样能使主键id使用MySQL的auto_increment呢&#xff1f; ◇解决方法&#xff1a;    打开table properties窗口 → columns → 选中id列 → 打开columns properties窗口 → 勾选identity即可   …

走进webpack(1)--环境拆分及模块化

初级的文章和demo已经基本完成了&#xff0c;代码也已经上传到了我的github上&#xff0c;如果你对webpack的使用并不是十分了解&#xff0c;那么建议你回头看下走近系列&#xff0c;里面包括了当前项目中使用频繁的插件&#xff0c;loader的讲解。以及基本的webpack配置&#…

适用于微服务架构的Apache Camel

在知道微服务架构被称为之前&#xff0c;我一直在使用它们。 我曾经使用过由隔离模块组成的管道应用程序&#xff0c;这些模块通过队列相互交互。 从那时起&#xff0c;许多&#xff08;前&#xff09;ThoughtWorks专家讨论了微服务。 首先是 Fred George&#xff0c; 然后是 J…

题解 P3811 【【模板】乘法逆元】

P3811 【模板】乘法逆元 一个刚学数论的萌新&#xff0c;总结了一下这题的大部分做法 //一、费马小定理快速幂 O(nlogn) 64分 #include<cstdio> using namespace std; typedef long long ll; int a,b; inline ll pow(ll x,ll p) {ll ans1;x%b;while(p) {if (p&1) an…