首页 > 代码库 > JavaScript学习14:表单处理

JavaScript学习14:表单处理

        什么是表单?

        在HTML中,表单是由<form>元素来表示的。而在JavaScript中,表单相应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素的默认属性,而且还独有自己的属性和方法。

        技术分享

        获取表单<form>对象的方法有非常多种,比方:document.getElementById(“表单标签ID”)、document.getElementsByTagName(‘标签名称’)等等。

        提交表单

        获取了页面表单对象。就要考虑怎样将表单数据提交给后台了。通常的方式是使用submit事件,他的默认行为就是携带数据跳转到指定的页面。

我们能够通过事件对象。来阻止submit的默认行为。

同一时候也能够使用submit()方法来自己定义触发submit事件,也就是说并不一定要点击submitbutton才干进行提交操作。

        提交数据最大的问题就是反复提交表单。由于各种原因,当一条数据提交到server的时候会出现延迟等长时间没有响应的情况。导致用户不停的进行提交操作,从而使得反复提交了非常多同样的请求,或者造成错误,或者这写入多条同样的信息,而这都不是我们想看到的。

        解决的方法,简单来说有两个:第一就是提交之后,立马禁用点击button;另外一种就是提交之后,进行推断,若已提交过,则取消兴许的表单提交提交操作。

        了解了上面的基础知识。我们来看两种经常使用的表单元素:文本框和选择框。

        文本框脚本

        在HTML中,有两种方式来表现文本框:一种是单行文本框<input type=”text”>,一种是多行文本框<textarea>。尽管<input>在字面上有value值,<textarea>没有,可是我们都能够通过value获取他们的值。至于其它的属性和方法不再赘述,以下看一个比較有意思的东西,过滤输入。

        为了使文本框输入指定的字符。我们必需要对输入的字符进行验证。

有一种做法是推断字符是否合法,这是提交后操作的。

那么我们也能够在提交前限制某些字符,这就是过滤输入。看下代的简单实现:     

<span style="font-size:18px;">//屏蔽非数字键的输入
	addEvent(textField,'keypress',function(evt){
		var e=evt||window.event;
		var charCode=getCharCode(evt);
		if(!/\d/.test(String.fromCharCode(charCode))&&charCode>8){
			preDet(evt);
		}
	});</span>

        选择框脚本

        选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外,HTMLSelectElement类型还提供了例如以下的属性和方法:

       技术分享

        在DOM中。每一个<option>元素都有一个HTMLOptionElement对象,以便訪问数据。这个对象有例如以下一些属性:

        技术分享

        选择框有单选和多选之分。对于单选来说,使用selectedIndex属性最为简单。

而对于多选的需求,则使用selected属性更为简单一些。这是推断是否选中,对于选中的button怎样获取它的值,就要使用checked属性了。

        代码演示样例就不再写了。由于比較简单,都是基础性的。大家有兴趣实践的能够写写代码实现一下单选和多选的功能。

        小结一下:

        JS的表单处理远远不止这些,比方表单里面的表格、页面的label等等。都是表单的元素,尤其是datagrid控件。它和后台的数据交互比較重要。我们在做各种管理信息系统的过程中,肯定要大量的使用它,因此还有非常多的东西须要我们去了解和深入学习。

JavaScript学习14:表单处理