JavaScript表单总结

提交表单

3种实现方式：

<input type="button" value="submit" name="submit">
<button type="submit">submit form</button>
<input type="image" src="a.jpg">

• 只要表单存在以上任何一种按钮且获得焦点时都可以通过回车提交表单，（textarea会换行），即触发submit事件，可在其中验证表单，或阻止提交，利用e.preventDefault();
• 也可以通过form.submit()方式提交表单，但这种方式不会触发submit事件，因此要提前验证表单。

重置表单

input 和button两种按钮实现，可用form.reset重置表单，同时出发onreset事件。

form.elements获取表单name

var form = document.forms[0];
form.elements[0];//获取第一个表单字段
form.elements['miao'];
//获取名为miao的字段，若是radio，会返回NodeList包含所有的同名name字段。

共有的表单属性

• disable 是否禁用
• form 指向当前字段所所属表单
• name 表单字段名称
• readOnly 字段是否只读
• tabIndex tab切换序号
• type 类型
• value 提交给服务器的值

防止重复提交表单

第一次点击提交后就将其disable置为true

<input type="button" value="submit" name="submit">
var submit = document.forms[0]['submit'];
submit.onsubmit = function(){
    submit.disabled = true;
    //提交给 
}

若上面用onclick提交表单，有的浏览器会先触发click事件，若在click事件中禁用submit按钮则导致表但不能正常提交。

var submit = document.getElementById('submit');
    submit.onclick = function () {
        alert('click');
        submit.disabled = true;
    };
    document.forms[0].onsubmit = function () {
        alert('submit');
    };

以上代码在Chrome和Opera中测试时发现，在click事件中禁用表单按钮后不能再触发onsubmit事件，但是IE11、ff下都能提交。

change事件

对于input和textarea元素，仅当失去焦点且value值改变时触发，select元素在选项改变时触发。

change事件和focus、blur事件一起验证用户输入：
- focus 改变文本框的颜色
- blur 恢复文本框颜色
- change 验证用户输入是否合法，不合法的话重新focus

propertychange事件和input事件

• input事件：元素value值发生改变时触发，IE11或其他
• propertychange事件：元素属性改变时触发，IE10，9专属。
• IE11已经不支持attachEvent添加事件了

为表单元素添加的事件通过js改变value值后不能触发

为input添加change或者input事件后，只能通过页面手动改变value值后才能触发添加的回调函数，而通过js改变value值并不能触发。可将input的监听事件中要实现的功能封装成独立的方法，在js改变input元素值后继续调用此方法即可。