表单脚本

JavaScript 最初的一个功能就是分担服务器处理表单的责任,打破处处依赖服务器的局面。但由于表单没有为许多常见的任务提供现成的解决手段,很多开发人员不仅会在验证表单时使用 JavaScript,而且还增强了一些标准表单控件的默认行为。

表单基础知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//获取表单
var form = document.getElementById('form1');
//或者
var form = document.forms[0];//获取页面中第一个表单
var form = document.forms['form2'];//获取页面中name='form2'的表单
//提交表单
//在相应表单拥有焦点的情况下,按回车键可以触发 submit 事件。
form.submit();//调用此方法不会触发 shubmit 事件,所以需要先验证表单。
//表单重置
form.reset();//调用此方法会触发 reset 事件。
//表单字段
var field1 = form.elements[0];//表单的第一个字段
var field2 = form.elements['textbox1'];//name='textbox1'的表单字段
var len = form.elements.length;//字段数量
//共有表单字段属性
disabled//布尔值,表单是否被禁用。为避免多次提交表单,可以表单提交一次后禁用提交按钮
form//指向当前字段所属表单的指针,只读
name//表单的名称
readOnly//当前字段是否只读
tabIndex//tab切换序号
type//类型
value//当前字段要提交给服务器的值
//共有表单字段方法
focus();//获取焦点
blur();//移走焦点
//共有表单字段事件
blur;//失去焦点时触发
change//对于input和textarea元素,失去焦点且value改变时触发;对于select元素,改变选项时触发。
focus//获取焦点时触发

文本框脚本

1
2
input//type=text; 通过size设置可以显示的字符数;设置maxlength设置最大字符数
textarea//rows行数,cols列数

选择文本

1
2
3
4
5
6
7
8
9
10
11
textarea.select();//获取焦点并选中所有文本。在有默认文本时,用户不必一个字一个字删
//选择部分文本
var textarea.value = 'Hello World!'
textarea.setSelectionRange(0, 3);//'Hel' , 要看到选中的文本,必须在这个方法前先获取焦点。
//选中文本时会触发select事件
//取得选择的文本
selectionStart//选择文本的开头偏移量
selectionEnd//选择文本的结尾偏移量

过滤输入

1
2
//屏蔽字符
//监听文本框的 keypress 事件。检测 keypress 事件的对应编码,再决定如何响应。

自动切换焦点

1
//通过监听文本框的 keyup 事件,当文本框输入的字符与 maxlength 相等时,找到下一个文本框,并将焦点切换到此文本框上。

HTML5 约束验证API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//必填字段
required
//其他输入类型
type = 'email | url | number | range | datetime | datetime-local | date | month | week | time'
//数值范围
min = '';//最小值
max = '';//最大值
step = '';//步长
//修改当前input的数值
input.setpUp();//+1
input.stepUp(5);//+5
input.stepDown();//-1
input.stepDown(10);//-10
//输入模式
pattern = '\d+';//数值
//检测有效性
checkValidity();//根据前面的约束验证输入是否有效
document.forms[0].element[0].checkValidity();//第一个表单的第一个字段输入是否有效
document.forms[0].checkValidity();//第一个表单是否有效
//validity属性
customError //设置了 setCustomValidity(),则返回true
patternMismatch //与指定的 pattern 不符,则返回true
rangeOverflow //如果值比max值大,返回true
rangeUnderflow //如果值比min值小,返回true
stepMisMatch //步长不合理,返回true
tooLong //值的长度超过了maxlength,返回true
typeMismatch //值不是'mail' 或 'url',要求的格式,返回true
valid //如果这里的其他值都返回false,则返回true
valueMissing //如果标注为required的字段没有值,返回true
//禁用验证
novalidate //为form设置此值,可以不验证表单
formnovalidate //为form表单的提交按钮设置此值,可以不验证表单

选择框脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//select元素(HTMLSelectElement)拥有的属性
add(newOption, relOption); //向控件中插入新的<option>,位置在 relOption 前。
multiple //布尔值,是否允许多选
options //控件中所有 option 元素的 HTMLCollection
remove(index); //移除给定项位置的选项
selectedIndex; //基于0的选中项索引,没有选中项,则为 -1 。
size //选中框可见行数
//option元素(HTMLOptionElement)拥有的属性
index //当前选项在 options 集合中的索引
label //当前选项的标签,相当于HTML中的 label 特性
selected //是否被选中
text //选项的文本
value //选项的值
//选择选项
var selectedOption = selectbox.options[selectbox.selectedIndex];//适合单选
//对于多选,可以遍历所有 option 的 selected 属性。
var arr = [];
var option = null;
for(var i=0; i<selectbox.options.length; i++){
option = selectbox.options[i];
if(option.selected){
arr.push(option);
}
}
arr;//选中的项
//添加选项
var newOption = new Option('option text', 'option value');
selectbox.add(newOption, undefined);
//移除选项
selectbox.remove(0);//移除第一个
//移动和重排选项
//可以使用DOM方法中的 insertBefore() 和 appendChild();

表单序列化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for(i = 0, len = form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case 'select-one':
case 'select-multiple'
if(field.name.length){
for(j = 0; optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if(option.selected){
optValue = '';
if(option.hasAttribute){
optValue = (option.hasAttribute('value') ? option.value : option.text);
}else{
optValue = (option.attributes['value'].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case 'file': //文件输入
case 'submit': //提交按钮
case 'reset': //重置按钮
case 'button': //自定义按钮
break;
case 'radio': //单选按钮
case 'checkbox'://复选框
if(!field.checked){
break;
}
//执行默认操作
default:
//不包含没有名字的表单字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
}
}
}
return parts.join('&');
}

富文本编辑