13518219792
网站建设资讯

NEWS

网站建设资讯

基于JavaScript表单脚本的示例分析

小编给大家分享一下基于JavaScript表单脚本的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

瓜州网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

什么是表单？

一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

JavaScript与表单间的关系：JS最初的应用就是用于分担服务器处理表单的责任，打破依赖服务器的局面，尽管目前web和javascript都有了长足的发展，web表单依然没有为许多常见的任务提供现成的解决方案，很多开发人员不仅会在验证表单的时候使用javascript，而且还会用来增强一些标准表单控件的默认行为。

一 ,表单的基础知识

在HTML中，表单由form标签，在javascript中，表单对应HTMLFormElement类型，HTMLFormElement类型继承HTMLElement类型，所有它和其他的Element元素有相同的默认属性，同时它也有自己的属性和方法：

acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。

action：接受请求的 URL；等价于 HTML 中的 action 特性 。

elements：表单中所有控件的集合（HTMLCollection）。

enctype：请求的编码类型；等价于 HTML 中的 enctype 特性。

length：表单中控件的数量。

method：要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。

name：表单的名称；等价于 HTML 的 name 特性。

reset()：将所有表单域重置为默认值。

submit()：提交表单。

target：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

要取得form表单元素的方法有： var form=document.getElementById('form1'); //通过id来取得表单元素

var firstForm=document.forms[0]; //通过document.forms来取得页面中的所有表单元素，通过索引值'0‘，取得第一个表单元素

var form2=document.forms['form2']; //通过document.forms来取得页面中的所有表单元素，通过name值取得特定的表单元素

提交表单：

　
　
　
　Submit Form
　
　

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交

在JS中我们同样可以以编程的方式调用submit（）方法来提交表单：

var form = document.getElementById("myForm");
//提交表单
　form.submit();

阻止表单提交（阻止默认事件）：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});

在表单数据无效而不能发送给服务器时，可以使用这一技术

重置表单：




Reset Form

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值

用JS方法来重置表单：

var form = document.getElementById("myForm");
//重置表单
form.reset();

阻止重置表单的默认操作：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});

表单字段：

每个表单都有Element属性，该属性是表单中所有表单元素（字段）的集合。这个集合是一个有序列表，每个表单字段在element集合中出现的顺序，与在标记中出现的先后顺序相同，可以按位置和name值来访问他们。常见的表单字段有input，select，fieldset，要取得表单中的表单字段：

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

共有的表单字段属性：

disabled：布尔值，表示当前字段是否被禁用。

form：指向当前字段所属表单的指针；只读。

name：当前字段的名称。

readOnly：布尔值，表示当前字段是否只读。

tabIndex：表示当前字段的切换（tab）序号。

type：当前字段的类型，如"checkbox"、 "radio"，等等。

value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径

除了 form 属性之外，可以通过 JavaScript 动态修改其他任何属性。

能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。

用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。

为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：

//避免多次提交表单
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按钮
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});

除了

之外，所有表单字段都有 type 属性。对于元素，这个值等于 HTML 特性 type 的值。对于其他元素，这个 type 属性的值如下表所列。

基于JavaScript表单脚本的示例分析

共有的表单字段方法 ：

每个表单字段都有两个方法： focus()和 blur()。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。

EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件，放页面加载完成，光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
});

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。

例如：

与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点:

document.forms[0].elements[0].blur();

change事件：对于和