说说 JavaScript 表单脚本之基础知识

HTML 中，使用 <form> 来表示表单元素；在 JavaScript 中，使用的是 HTMLFormElement 类型，它继承自 HTMLElement，所以它有继承了来的一些属性，除此之外，还有一些独有的属性和方法：

属性和方法	说明
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> 元素的方法有这些：

1、getElementById()

var form = document.getElementById("form1");

2、先取得所有表单，然后再取得特定表单：

var firstForm = document.forms[0];//取得页面中的第一个表单
var myForm = document.forms["form2"];//取得页面中名称为“form2”表单

注意，可以同时为表单指定 id 和 name 属性，但它们的值可以不同！

1 提交表单

用户单击提交按钮或者图像按钮时，就会提交表单。

<!-- 通用的提交按钮 -->
<input type="submit" value="提交表单">

<!-- 自定义的提交按钮 -->
<button type="submit">提交表单</button>

<!-- 图像按钮 -->
<input type="image" src="graphic.gif">

只要表单中存在上面这些按钮，那么这个表单中的控件拥有焦点的情况下，按下回车键就会提交表单。textarea 例外，按下回车键只会换行。

这种方式提交的表单，会把请求发送给服务器之前触发 submit 事件，所以阻止这个事件的默认行为，就能取消表单提交：

var form = document.getElementById("form1");
EventUtil.addHandler(form, "submit", function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);

    //阻止默认事件
    EventUtil.preventDefault(event);
});

一般情况下，只要表单数据验证无效时，就可以使用这一技术，取消表单提交。

在 JavaScript 中，可以使用 submit() 方法提交表单。这种方法可以无需在表单中定义提交按钮：

var form = document.getElementById("form1");

form.submit();//提交表单

以这种方式提交表单时，不会触发 submit 事件，所以要在调用这个方法之前，先验证表单数据是否有效！

提交表单的最大问题是重复提交。第一次提交表单后，可能长时间没有反应，那么用户就会变得不耐烦，他们就会反复点击提交按钮！有两个方法可以解决这一问题：

1. 第一次提交表单后就禁用提交按钮。
2. 利用 onsubmit 事件处理程序取消后续的表单提交操作。

2 重置表单

创建重置按钮：

<!-- 通用重置按钮-->
<input type="reset" value="重置表单">

<!-- 自定义重置按钮-->
<button type="reset">重置表单</button>

重置表单后，所有的表单字段都会恢复到页面刚加载后的初始值。

单击重置按钮时，会触发 reset 事件。利用这个事件，我们可以在必要时取消重置操作：

var form = document.getElementById("form1");
EventUtil.addHandler(form, "reset", function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);

    //阻止表单重置
    EventUtil.preventDefault(event);
});

也可以通过 JavaScript 重置表单：

var form = document.getElementById("form1");

form.reset();//重置表单

注意，调用 reset() 后会触发 reset 事件！

---

注意： 重置表单意味着对已经填写的数据不满意！如果意外触发了表单重置按钮，那么用户可能会生气的！所以事实上，重置表单的需求很少见，建议提供一个取消按钮，让用户能够回到前一个页面。

---

3 表单字段

可以使用原生的 DOM 方法访问表单元素。此外，每个表单都有 elements 属性，它是表单中所有元素的集合，这个集合是一个有序列表。每个表单字段在这个集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置或者 name 属性来访问：

<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>
<script type="text/javascript">
    var form = document.getElementById("myForm");

    var colorFields = form.elements["color"];
    console.log(colorFields.length);//3

    var firstColorField = colorFields[0];
    var firstFormField = form.elements[0];
    console.log(firstColorField === firstFormField);//true
</script>

---

注意： 也可以通过表单的属性来访问元素，比如 form[0] 可以得到第一个表单字段，form[“color”]可以得到名称为 color 的字段。但我们应该尽可能地使用 elements 方法，因为前一种方式只是为了与旧浏览器兼容而保留的一种过滤方式！

---

3.1 共有的表单字段属性

属性	说明
disabled	布尔值；当前字段是否被禁用。
form	当前字段所属的表单指针；只读。
name	当前字段名称。
readOnly	布尔值；当前字段是否只读。
tabIndex	当前字段的切换序号。
type	当前字段的类型。
value	当前字段被提交给服务器的值。对于文件字段，这个属性是只读的，它是文件在计算机中的路径。

---

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

var form = document.getElementById("myForm");
var field = form.elements[0];

//修改 value 属性
field.value = "另一个值";

//检查 form 属性的值
console.log(field.form == form);//true

//把焦点设置为当前字段
field.focus();

//禁用当前字段
field.disabled = true;

//修改 type 属性（对 <input> 是可行的，但不建议这样做！）
field.type = "checkbox";

可以在任何时候、任何方式动态操作表单。比如说第一次单击提交按钮后就禁用这个按钮，从而避免多次提交表单。我们可以通过 submit 事件来实现：

<form method="post" id="myForm" action="javascript:alert('Form submitted!')">
    <input name="name">
    <button name="submit-btn" type="submit">提交</button>
</form>

<script type="text/javascript">
    var form=document.getElementById("myForm");

    //避免多次提交表单
    EventUtil.addHandler(form, "submit", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);

        //取得提交按钮
        var btn = target.elements["submit-btn"];

        //禁用它
        btn.disabled = true;
    })
</script>

注意，不同使用 onclick 事件处理程序来实现这个功能，因为不同的浏览器在这两个事件处理程序之间存在时差：有的浏览器会在触发表单的 submit 事件之前触发 click 事件，有的则相反！所以，最好是通过 submit 事件来禁用提交按钮！不过要注意，只有在包含提交按钮的情况下，才有可能触发表单的 submit 事件。

除了 <fieldset> 之外，所有的表单字段都有 type 属性：

元素	type 属性值	示例
单选列表	select-one	<select>...</select>
多选列表	select-multiple	<select multiple>...</select>
自定义按钮	sumbit	<button>...</button>
自定义非提交按钮	button	<button type="button">...</button>
自定义重置按钮	reset	<button type="reset">...</button>
自定义提交按钮	submit	<button type="submit">...</button>

---

<input> 和 <button> 元素的 type 属性是可以动态修改的，而 <select> 的 type 属性是只读的！

3.2 共有的表单字段方法

3.2.1 focus()

这个方法会将浏览器的焦点设置为这个表单字段，即激活表单字段。它也可以响应键盘事件，比如被设置为焦点的文本框会显示插入符号，以便随时接受输入。使用这个方法，可以将用户的注意力吸引到页面中的某个表单字段。我们可以在页面加载完毕后，通过监听页面的 load 事件，将焦点转移到表单中的第一个字段。在 HTML5 中为表单字段添加了一个 autofous 属性，只要设置了这个属性，就能自动把焦点设置到这个字段，所以跨浏览器的方法是这样的：

<form method="post" id="myForm" action="javascript:alert('Form submitted!')">
    <input name="name" autofocus>
    <button name="submit-btn" type="submit">提交</button>
</form>

<script type="text/javascript">

    EventUtil.addHandler(window, "load", function (event) {
        var element = document.forms[0].elements[0];
        if (element.autofocus !== true) {
            element.focus();
            console.log("JS focus");
        }
    });
</script>

支持 autofocus属性的浏览器是 Firefox 4+、Safari 5+、Chrome 和 Opera 9.6+。

---

注意： 默认情况下，只有表单字段可以获得焦点。如果将其他元素的 tabIndex 设置为 -1，然后再调用 focus() 方法，也可以让这些元素获得焦点。只有 Opera 不
支持这种技术！

---

3.2.2 blur()

它会从元素中移走焦点。早期的 web 开发中，表单字段还没有 readonly 属性，这时就是使用 blur() 方法来创建只读字段，现在用的少了，不过在某些场合可能还能派上用场：

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

3.3 共有的表单字段事件

除了支持鼠标、键盘、修改和 HTML 事件之外，所有的表单字段还支持这 3 个事件：

事件	说明
blur	当前字段失去焦点时触发。
change	对于 <input> 和 <textarea> 元素，会在失去焦点且 value 值改变时触发；对于 <select> 元素，会在选项改变时触发。
focus	当前字段获得焦点时触发。

---

一般使用 focus 和 blur 事件来改变用户界面，诸如给用户以视觉提示或者添加额外功能（为文本框显示一个下拉选择框）。change 事件用于验证用户在字段中输入的数据是否有效。

我们现在做一个文本框，只允许用户输入数值。利用 focus 事件来修改文本框的背景颜色来清楚地表明这个字段获得了焦点；再利用 blur 事件恢复文本框的背景颜色；最后利用 change 事件在用户输入了非数值字符时再次修改背景颜色：

<script type="text/javascript">
    var textbox=document.forms[0].elements[0];

    EventUtil.addHandler(textbox,"focus",function(event){
        event=EventUtil.getEvent(event);

        var target=EventUtil.getTarget(event);

        if(target.style.backgroundColor!="red"){
            target.style.backgroundColor="yellow";
        }
    });

    EventUtil.addHandler(textbox,"blur", function (event) {
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);

        if(/[^\d]/.test(target.value)){
            target.style.backgroundColor="red";
        }else{
            target.style.backgroundColor="";
        }
    });

    EventUtil.addHandler(textbox,"change", function (event) {
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);

        if(/[^\d]/.test(target.value)){
            target.style.backgroundColor="red";
        }else{
            target.style.backgroundColor="";
        }
    });
</script>

---

注意： blur 和 change 事件的执行顺序没有规定，所以我们在开发时不能依赖这两个事件的执行顺序！

---