浅谈JavaScript表单

女爷i 2022-06-17 05:12 307阅读 0赞

浅谈表单脚本

一、表单的基础知识

取得<form>元素引用的方式：

1) 为<form>元素添加id，然后通过getElementById()方法来访问；

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

2) 通过document.forms取得页面中的所有表单，再通过下标或name值来访问：

①　通过下标：

var myForm = document.forms[0];

②　通过name值：

var myForm = document.forms["form1"];

3) document对象直接通过name值来访问（不推荐，一是容易出错，二是将来的浏览器可能会不支持）。

var myForm = document.form1;

1、提交表单

1) 提交按钮类型

①　通用提交按钮：<input type="submit" value="...">

②　自定义提交按钮：<button>type="submit">...</button>

③　图像按钮：<input type="image" src="...">

2) 提交表单的方法

①　若表单里存在以上任何一种提交按钮，在表单控件拥有焦点的情况下，按回车键就可以提交表单；若表单里面没有提交按钮，按回车键不会提交表单。这种提交方式会触发submit事件，通过监听submit事件可以验证表单数据，并决定是否允许表单提交（阻止submit事件的默认行为preventDefault()就可以取消表单提交）。

②　JavaScript中调用submit()方法也能提交表单，而且这种方式无需包含提交按钮，任何时候都可以正常提交表单，但这种提交方式不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。

3) 重复提交表单

提交表单可能出现的最大问题：重复提交表单。

解决方法1：在第一次提交表单后就禁用提交按钮。

解决方法2：利用onsubmit()事件处理程序取消后续的表单提交工作。

2、重置表单

1) 重置按钮类型

①　通用重置按钮：<input type="submit" value="">

②　自定义重置按钮：<button>type="submit">...</button>

2) 重置表单的方法

①　若表单里存在以上任何一种重置按钮，在表单控件拥有焦点的情况下，按回车键就可以重置表单；若表单里面没有重置按钮，按回车键不会提交表单。这种提交方式会触发reset事件，通过监听reset事件可以决定是否允许表单重置（阻止reset事件的默认行为preventDefault()就可以取消表单重置）。

②　JavaScript中调用reset()方法也能重置表单，而且这种方式无需包含重置按钮，任何时候都可以正常重置表单，但这种提交方式会触发reset事件。

3、表单字段

每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合，可以通过下标或name特性来访问它们。

var myForm = document.getElementById("form1");
    var field1 = myForm.elements[0];
    var field2 = myForm.elements["text1"];
    var len = myForm.elements.length;

若表单中存在多个name特性相同的字段，如radio单选按钮，elements属性会返回以该name命名的一个nodeList。若访问element\[0\]，则只会返回第一个元素，即：

myForm.elements["radio"][0] = myForm.elements[0];

1) 共有的表单字段属性

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

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

③　name：当前字段的名称；

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

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

⑥　type：当前字段的类型；

⑦　当前字段将提交到服务器的值

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

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

2) 共有的表单字段方法

①　focus()方法：

可以侦听页面的load事件，并将该事件发生时在表单的第一个字段上调用focus()方法：

window.addEventListener(“load”, function() {
    	document.forms[0].elements[0].focus();
    });

HTML5为表单字段新增了一个autofocus属性（布尔值属性），在支持该属性的浏览器中，不需要JavaScript就可以自动把焦点移动到相应字段。

可以先检测是否设置了autofocus属性，若未设置再调用focus()：

window.addEventListener(“load”, function() {
    	var element = document.forms[0].elements[0]；
    	if (element.autofocus != true)
    		element.focus();
    });

②　blur()方法：

调用blur()方法时，并不会把焦点移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走而已。

3) 共有的表单字段事件

①　blur：当前字段失去焦点时触发；

②　change：对于<textarea>和<input>元素，在失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发；

③　focus：当前字段获得焦点时触发。

通常可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。而change事件则经常用于验证用户在字段中输入的数据。