JavaScript学习14：表单处理

标签：javascript   表单处理   

        什么是表单？

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

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

        提交表单

        获取了页面表单对象，就要考虑如何将表单数据提交给后台了。通常的方式是使用submit事件，他的默认行为就是携带数据跳转到指定的页面。我们可以通过事件对象，来阻止submit的默认行为。同时也可以使用submit()方法来自定义触发submit事件，也就是说并不一定要点击submit按钮才能进行提交操作。

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

        解决办法，简单来说有两个：第一就是提交之后，立刻禁用点击按钮；第二种就是提交之后，进行判断，若已提交过，则取消后续的表单提交提交操作。

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

        文本框脚本

        在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属性更为简单一些。这是判断是否选中，对于选中的按钮如何获取它的值，就要使用checked属性了。

        代码示例就不再写了，因为比较简单，都是基础性的，大家有兴趣实践的可以写写代码实现一下单选和多选的功能。

        小结一下：

JavaScript学习14：表单处理

标签：javascript   表单处理   

原文地址：http://blog.csdn.net/lianjiangwei/article/details/47130833