JavaScript基础知识总结 17：JavaScript表单脚本

Posted 2022-06-27 哪 吒

目录

• • 一、表单基础
  • 二、提交表单
  • 三、表单字段的公共属性、方法、事件
  • • 1、表单字段的公共属性
    • 2、表单字段的公共方法
    • 3、表单字段的公共事件
  • 四、输入过滤，屏蔽字符
  • 五、剪切板事件
  • 六、自动切换
  • 七、HTML5约束验证API
  • • 1、必填字段required
    • 2、更多输入类型
    • 3、数值范围
    • 4、输入模式
    • 5、检测有效性
    • 6、禁用验证
  • 八、选择框编程

一、表单基础

Web表单在html中以元素表示，在javascript中则以HTMLFormElement类型表示。
HTMLFormElement类型继承自HTMLElement类型，因此拥有与其它HTML元素一样的默认属性，不过，HTMLFormElement也有自己的属性和方法。

1. acceptCharset：服务器可以接收的字符集，等价于HTML中的accept-charset属性；
2. action：请求中的URL，等价于HTML中的action属性；
3. elements：表单中所有控件的HTMLCollection；
4. enctype：请求的编码类型，等价于HTML中的enctype属性；
5. length：表单中控件的数量；
6. method：HTTP请求的方法类型，通常是get或post，等价于HTML中的method方法；
7. name：表单的名字，等价于HTML中的name属性；
8. reset()：把表单字段重置为各自的默认值，一般情况下不建议使用；
9. submit()：提交表单；
10. target：用于发送请求和接收相应地窗口的名字，等价于HTML中的target属性；

二、提交表单

//通用提交表单
<input type="submit" value="Submit Form">
//自定义按钮提交表单
<button type="submit">Submit Form</button>

如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回车键就可以提交表单。阻止这个事件的默认行为可以取消提交表单。

let form = document.getElementById("myForm");
form.addEventListener("submit",(event) => 
	//阻止表单提交
	event.preventDefault();
);

调用preventDefault()就可以阻止表单提交。
也可以通过submit()方法提交表单。

let form = document.getElementById("myForm");
form.submit();

事件提交的最大问题是如何避免二次提交。
如果提交表单之后没有什么反应，用户可能会进行第二次点击，甚至更多次，结果肯定是很烦人的，比如服务器要处理重复的请求，甚至可能造成损失（比如用户在购物，则可能会下多个单，引起不必要的客户投诉。）。解决这个问题的方式，① 在表单提交后禁用提交按钮。② 通过onsubmit()事件处理程序取消之后的表单提交。

三、表单字段的公共属性、方法、事件

1、表单字段的公共属性

1. disabled：布尔值，表示表单字段是否禁用；
2. form：指针，指向表单字段所属的表单，这个属性是只读的；
3. name：字符串，这个字段的名字；
4. readOnly：只读
5. tabIndex：数值，表示这个字段在按Tab键时的切换顺序；
6. type：字符串，表示字段类型，比如checkbox、radio等；
7. value：要提交给服务器的字段值
   例如：

let form = document.getElementById("myForm");
let field = form.elements[0];
field.value = "zhangsan";
//给字段设置焦点
field.focus();

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

避免多出提交的代码：

let form = document.getElementById("myForm");
for.addEventListener("submit",(event) => 
	let target = event.target;
	let btn = target.elements["submit"];
	btn.disabled = true;
);

以上代码在表单的submit事件上注册了一个事件处理程序，当submit事件触发时，代码会取得提交按钮，然后将其disabled属性设置为true。注意，这个功能不能通过直接给提交按钮添加onclick事件处理程序来实现，原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的submit事件前先触发提交按钮的click事件，有些浏览器则会后触发click事件，对于先触发click事件的浏览器，这个按钮会在表单提交前被禁用，这就意味着表单不会被提交了。因此最好使用表单的submit事件来禁用提交按钮。

2、表单字段的公共方法

每个表单字段都有两个公共方法：focus()和blur()。
focus()方法把浏览器焦点设置到表单字段，这意味着该字段会变成活动字段并可以响应键盘事件。
blur()是focus()的反向操作，从元素上移除焦点。

3、表单字段的公共事件

1. blur：在字段失去焦点时触发；
2. change：在<input>和<textarea>元素的value发生变化且失去焦点时触发，或者在<select>元素中选中项发生变化时触发；
3. focus：在字段获得焦点时触发；

四、输入过滤，屏蔽字符

下面代码屏蔽所有按键的输入：

textbox.addEventListener("keypress",(event) => 
	event.preventDefault();
);

运行以上代码会让文本框编程只读，因为所有按键都被屏蔽了。如果想只屏蔽部分特定字符，则需要检查事件的charCode属性，以确定正确的回应方式。
例如，下面就是只允许输入数字的代码：

textbox.addEventListener("keypress",(event) => 
	if(!/\\d/.test(String.fromCharCode(event.charCode)))
		event.preventDefault();
	
);

上述代码先用String.fromCharCode()把事件的charCode转换为字符串，再用正则表达式/\\d/来测试。
这个正则表达式匹配所有数字字符。

五、剪切板事件

1. beforecopy
2. copy
3. beforecut
4. cut
5. beforepaste
6. paste

六、自动切换

JavaScript可以通过很多方式增强表单字段的易用性，最常见的是在当前字段完成时自动切换到下一个字段，比如对于已知长度的输入框，比如手机号码，在中国手机号码都是11位，可以在手机号码输入框到达11个字符时，自动把焦点移到下一个输入框。

七、HTML5约束验证API

1、必填字段required

2、更多输入类型

• type="email";
• type="url";

3、数值范围

除了email和url，HTML5还定义了其它几种新的输入元素类型，它们都是期待某种数据输入的，比如number、range、datetime、datetime-local、date、month、week、time。

4、输入模式

HTML5为文本字段新增了pattern属性，这个属性用于指定一个正则表达式，用户输入的文本必须与之匹配。例如只能在文本中输入数字，
<input type="text" pattern="\\d+" name="count">

5、检测有效性

使用checkValidity()方法可以检测表单中任意给定字段是否有效。这个有效性检测是针对前面提到的约束API，如果字段有效就会返回true，否则返回false。

if(document.form[0].elements[0].checkValidity())
	//字段有效
else
	//字段无效

checkValidity()方法只会告诉我们字段是否有效，而validity属性会告诉我们字段为什么有效或者无效。这个属性是一个对象，包含一系列返回布尔值的属性。

6、禁用验证

通过特定noValidate属性可以禁止对表单进行任何验证。
document.form[0].noValidate = true;//关闭验证

八、选择框编程

选择框是使用<select>和<option>创建的。

常见属性和方法：

1. add：在relOption之前向控件中添加新的；
2. multiple：布尔值，表示十分允许多选；
3. options：控件中所有元素；
4. remove(index)：移除给定位置的选项；
5. selectedIndex：选中项基于0的索引值，没有没有选中项则为-1，对于允许多选的列表，始终是第一个选项的索引；
6. size：选择框中可见的行数；