文档章节

form对象

人间四月
 人间四月
发布于 2015/12/10 17:52
字数 587
阅读 9
收藏 0
点赞 0
评论 0

form对象

  1. form对象的属性:

    1. name:表单的名称,主要用来让JS控制表单,

    2. action:表单的数据处理程序

    3. method:表单的提交方式,POST,GET

    4. enctype:表单的编码方式

  2. form对象的方法:

    1. submit():提交表单,同:<input type = "submit" />

    2. reset():重置变淡,与重置按钮功能一样

  3. form对象的事件:

    1. onsubmit:当单击提交按钮是发生,在数据发往服务器之前,主要用来在表单提交之前进行表单验证

    2. onreset:当单击重置按钮时发生


获取表单元素
  • 通过网页元素的id来获取对象,document.getElementById(id)

  • 通过HTML标签名来获取对象,parentNode.getElemrntByTagName(tagName)

  • 通过name属性来获取表单元素对象,表单中所有元素的起点都必须是document对象

    • document.formObj.elementObj

    • 访问方式是三层结构,其中,formObj代表表单对象,elementObj代表表单元素对象

    • e.g.:document.form1.username.value.length

  <title>Document</title>
  <script type = "text/javascript">
	window.onload = function(){
		var thefrom = document.form1;
		//alert(thefrom);
		thefrom.method = "post";
		thefrom.action = "login"
	}
  
  </script>
 </head>
 <body>
	<form name = "form1">
		username:<input type = "text" name = "username" />
		passwd:<input type = "password" name = "userpwd">
		<input type = "submit" value = "submit"/>
	</form>
 </body>


事件的返回值:
  • 事件的返回值,会影响对象的默认动作。

  • 如果事件返回false,则阻止默认动作的执行;

  • 如果事件返回true或者空,则默认动作继续执行。

  • 受事件返回值影响的事件有:onclick,onsubmit



 

表单提交和验证方法总结
  1. 使用submit按钮,结合onsubmit事件来实现 

      1.   function checkForm(){
        	//判断用户名是否为空
        	if (document.form1.username.value=="")
        	{
        		window.alert("no null!")
        		return false;
        	}else{
        		window.alert("ok")
        		return true;  
        	}
          }
          </script>
         </head>
         <body>
        	<form name = "form1" onsubmit = "return checkForm()">
        		username:<input type = "text" name = "username" />
        		passwd:<input type = "password" name = "userpwd">
        		<input type = "submit" value = "submit"/>
  2.  使用submit 按钮,结合onclick事件实现表单的验证和提交

      1. <input type = "submit" value = "submit" onclick="return checkForm()" />
  3. button按钮(普通按钮),结合submit()方法实现表单的验证提交

      1.  <script type = "text/javascript">
        	function checkForm(){
        		if (document.form1.username.value.length ==0){
        			window.alert("not null")
        		}else if(document.form1.username.value.length < 5 || document.form1.username.valuellength > 20){
        			window.alert("should 5<value<20")
        		}else if(checkOtherchar(document.form1.username.value)){
        			window.alert("not specific symbol!")
        		}else{
        			window.alert("submit ok");
        			//表单提交
        			document.form1.submit();
        		}
        	}
        	function checkOtherchar(str)
        	{
        		//定义一个特殊符号的数组
        		var arr = ["*","&","<",">","$"]
        		for (var i = 0; i < arr.length ; i++)
        		{	
        			for(var j = 0;j < str.length ;j++ )
        			{	
        				if (arr[i] == str.charAt(j))
        				{	
        					return true;
        				}
        			}
        		}
        		return false;
        	}
          </script>
         </head>
         <body>
        	<form name = "form1" action = "login.php">
        		username:<input type = "text" name = "username" />
        		passwd:<input type = "password" name = "userpwd">
        
        		<input type = "button" value = "submit" onclick = "checkForm()" />
        	</form>
         </body>




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 70
码字总数 30455
作品 0
朝阳
程序员
Delphi中initialization和finalization

好了,进入正题,首先说明initialization 和 finalization 在代码单元中的位置: unit Unit1; interface usesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,......

KavenSu ⋅ 2014/01/08 ⋅ 0

MFC的窗体按钮点击响应事件

建立一个叫form1的窗体,头文件为form1.h; 建立一个叫form2的窗体,头文件为form2.h。 然后在form1.h中添加窗体2的头文件 #include"form2.h" 在类Form1的设计当中增加私有的窗体成员form2 f...

Amamatthew ⋅ 2014/06/17 ⋅ 0

收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示

ajax收集表单数据 分为两种情况: 一 有form表单情况 <script type="text/javascript"> var logFormObject=document.getElementById('logon'); function acceppt3(){ var xhr = creatXMLHtt......

PHer ⋅ 2014/06/23 ⋅ 0

SpringMvc表单使用

概述 在低版本的Spring中,你必须通过JSTL或spring:bind将表单对象绑定到HTML表单页面中,对于习惯了Struts表单标签的开发者来说,Spring MVC的这一表现确实让人失望。不过这一情况已经一去不...

小隐隐于市 ⋅ 2014/07/10 ⋅ 1

【转】在WinForm中理解单例模式

单例模式(Singleton Model)存在的必要性:   为什么需要单例模式呢? 在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才 能确保它们的逻辑正确性、以及良好的...

夏春涛 ⋅ 2012/07/24 ⋅ 0

MS CRM 2011 Form与Web Resource在JScript中的相互调用

在Form中可以添加一个html的web resource,在web resource里可以用JScript来使用REST Endpoint或者SOAD Endpoint。 你可以在Form中添加一个web resource,也可以为Form添加一个指向某web res...

技术小甜 ⋅ 2017/11/16 ⋅ 0

jfinal 表单提交问题,是否支持对象属性绑定提交方式?

@JFinal 你好,想跟你请教个问题: spring mvc 代码: ------------------------------------------------------------ 前段jsp代码:(form中为campaign 实体类绑定对象属性)...

诠释这低调 ⋅ 2013/07/04 ⋅ 6

Spring中formdata方式提交json对象和file之一

问题 想使用vue-resource表单提交方式到spring,这个表单中包含json对象和file对象。 思路 将json对象和file对象都放到表单提交方式里面的中,并在中指定内容格式。 步骤 Spring实现和配置 ...

亚林瓜子 ⋅ 06/12 ⋅ 0

学习: Delphi FireMonkey 结构性初略分析

Delphi 下的FireMonkey,很好地实现了 DirectUI与跨平台。学习了解他,对DirectUI编程及项目的跨平台实现有一定帮助。 虽然作为开发者个体,并不需要了解太多这些东西,只要求拿来能用能实现...

iSixther ⋅ 2014/12/27 ⋅ 4

Jquery Ajax请求文件下载操作失败的原因分析及解决办法(转载)

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 一、失败的原因 那是因为response原因,一般请求浏览器是会处理服务...

卯金刀GG ⋅ 2016/09/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 15分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 38分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 40分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 47分钟前 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 59分钟前 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 59分钟前 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部