文档章节

form对象

人间四月
 人间四月
发布于 2015/12/10 17:52
字数 587
阅读 9
收藏 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>




© 著作权归作者所有

共有 人打赏支持
下一篇: EventDOM:事件DOM
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
私信 提问
收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示

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

PHer
2014/06/23
0
0
JavaScript中对于form对象使用

1.Form对象是document下的一个子对象,表示表单对象。form对象代表一个HTML表单,在HTML文档中 每出现一次,就有一个Form对象被创建。有时,写作document.from.....或写为window.form.........

大海之一点
10/26
0
0
【转】在WinForm中理解单例模式

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

夏春涛
2012/07/24
0
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
0
Python全栈 Web(Django框架、HttpRequest,csrf跨域攻击)

Djanog 的ORM 自定义查询对象 - objects 声明一个类 EntryManager 继承自models.Manager 允许在EntryManager 的类中添加自定义函数 class EntryManager(models.Manager): def 函数名(self, ...

巴黎香榭
10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery

语法 描述 实例 $("*") 选取所有元素 在线实例 $(this) 选取当前 HTML 元素 在线实例 $("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例 $("p:first") 选取第一个 <p> 元素 在线实例 ...

mskk
16分钟前
0
0
微信红包设计方案

前言 微信红包一经推出,春节期间微信用户红包总发送量达80.8亿,红包峰值40.9w/秒,在如此量级下,系统设计存在各种变数,稍有闪失会功亏一篑。 红包系统 红包系统有三部分组成:信息流,业...

春哥大魔王的博客
26分钟前
0
0
微信开发-正式号的配置

1、设置相关 业务域名的设置(不设置的话,相关页面会显示防欺诈盗号信息提示) JS接口安全域名设置 网页授权域名设置 注意:以上三个设置中都有下载文件的提示,此文件内容一样,下载一个即可...

Code辉
31分钟前
1
0
微服务之Eureka服务发现

当调用API或者发起网络通信的时候,无论如何我们都要知道被调用方的IP和服务端口,大部分情况是通过域名和服务端口,事实上基于DNS的服务发现,因为DNS缓存、无法自治和其他不利因素的存在,...

架构师springboot
31分钟前
0
0
spring boot2 admin login

版本: admin server 配置 admin client 配置 参考资料

showlike
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部