form对象
form对象
人间四月 发表于2年前
form对象
  • 发表于 2年前
  • 阅读 7
  • 收藏 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>




共有 人打赏支持
粉丝 3
博文 70
码字总数 30455
×
人间四月
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: