引言：JavaScript最早被设计出来就是为了实现对注册表单的验证，本文简单的介绍了JavaScript的表单操作

1.获取表单对象的方法

1.通过表单ID获取：document.getElementById("formId");
2.通过表单的索引获取：document.forms[index];
3.通过表单的name获取：document.forms["formName"];
document.formName;

2.表单对象常用的属性

name 获取或设置表单的 name 属性
action 获取或者设置表单提交的地址
elements 获取一个数组，包括该表单中所有的表单域
length 获取表单的表单域的数量
method 获取或设置表单的表单的提交方式：get（默认）、post
enctype 获取或设置表单的编码方式：application/x-www-form-urlencoded（默认）、multipart/form-data、text/plain

3.get方式和post方式的区别

1.get的通过URL参数会显示在URL中，较不安全。
post的参数通过请求实体(Request body)传输，不会显示在URL中，相对安全。
2.get的参数长度有限制，长度视浏览器而定一般在2k左右。post的长度理论上是无限的
3.GET请求会被浏览器主动cache（缓存），而POST不会，除非手动设置。
4.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

4.enctype 编码方式

GET请求只能进行url编码（以“?name1=value1&name2=value2...”的方式），而POST支持多种编码方式。
post编码方式：
　　1.application/x-www-form-urlencoded（默认）以（name1=value1&name2=value2...）的方式
2.multipart/form-data
　　以类似于（Content-Disposition: form-data; name="name1"
　　　　　　   "value1"
　　　　　　　Content-Disposition: form-data; name="name2"
　　　　　　　"value2"
　　　　　　　）的方式
3.text/plain
　　以（name1=value1
　　　　name2=value2
　　　　...）的方式

5.表单对象的方法

　　submit()：相当于单击 submit 按钮，表示表单提交到指定页面
　　reset()：相当于单击 reset 按钮，表示所有表单域到初始值

6.表单对象的事件

　　onsubmit ：在表单提交之前触发（在表单外部通过submit()提交表单不会触发onsubmit事件）
　　onreset ：在表单被重置之前触发
　　注：让onsubmit事件、onreset事件返回一个false就可以阻止事件的执行(阻止表单提交或重置)
　　如：

  　　<form onreset="return false" onsubmit="return false"></form>

　　或

　　<form onreset="return test()" onsubmit="return test()"></form>

function test(){
　　return false;
}

7.表单域操作

7.1引用表单域的方法

1.document.getElementById(id);
2.form.elements[i];
3.form.elements[name];
4. form.name;
注：“form”是表单对象

7.2 表单域的常用属性

1.disabled ：使表单域不能接受用户的操作，变为只读
2.name ：获取或设置表单域的名称
3.form：获取该表单域所属的表单
4.value：获取或设置表单域的值
5.type ：判断表单域的类型
6.select标签的属性

1)selectedIndex表示当前选中的option的索引
2)options表示所有option标签对象的一个数组
3)length表示右多少个下拉列表项

7.option标签的属性

1)value 就是选项的值，提交时会提交该属性的值
2)text 就是option标签中间文本值，类似于innerText
3)selected="selected" 表示页面加载时默认的选项

7.3表单域的方法（A）

1.focus():使表单域获得焦点
2. blur()：使表单域失去焦点

7.4 文本域(text, password, textarea )

通过value 属性获取和设置文本域内容
通过defaultValue 获得文本域的默认值。reset 方法就是调用该属性。

7.5单选按钮组和复选框常用操作

通过 checked 属性获得选中和未选中的状态。
通过遍历来获取被选中的值

7.6下拉列表的使用

1.使用 value 属性获取和设置下拉列表选中选项的值
2.使用 selectedIndex 属性获取当前被选中选项的索引
3.使用 options 属性获取所有选项集合
4.使用 option 对象的 value 属性和 text 属性, 可以读写这两个属性。
5.使用 option 对象的 selected 属性选中该 option

8.表单验证操作(A)

应用验证函数的两种常用的方法：
　　1. <input type="submit" onclick="return validate()"/>
　　2. <form onsubmit="return validate()"/>
在函数中写验证代码不满足就返回false（若返回 false,则不提交表单）

原文链接:https://www.cnblogs.com/gaojinshun/p/10846296.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有