文档章节

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>




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 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
【转】在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
$.ajax使用总结(一):Form提交与Payload提交

$.ajax使用总结(一):Form提交与Payload提交 后端处理前端提交的数据时,既可以使用Form解析,也可以使用JSON解析Payload字符串。 Form解析可以直接从Request对象中获取请求参数,这样对象转...

spinachgit
06/26
0
0
关于js中window.location.href,location.href,parent....

"window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是...

^6^|^6^
2011/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取余运算

python中取余运算逻辑如下: 如果a 与d 是整数,d 非零,那么余数 r 满足这样的关系: a = qd + r , q 为整数,且0 ≤ |r| < |d|。 经过测试可发现,python3.6中取余运算得到的 r 是正整数;...

colinux
9分钟前
0
0
[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
3
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
3
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
1
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部