文档章节

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
jfinal 表单提交问题,是否支持对象属性绑定提交方式?

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

诠释这低调
2013/07/04
829
6
Spring中formdata方式提交json对象和file之一

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

亚林瓜子
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

wordpress 汉化

在 wp-config.php 添加 define('WPLANG','zh_CN'); 在后台,更新 now ,即可。

james_laughing
13分钟前
0
0
Android JNI开发系列(十一) JNI 访问父类的构造方法和父类实例方法

JNI 访问父类的构造方法和父类实例方法 构造方法和父类实例方法 先看一段Java代码, Java package org.professor.jni.animal;import android.util.Log;public class Animal {protecte...

蔡小鹏
20分钟前
0
0
腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
47分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
58分钟前
2
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部