JavaScript基础知识总结 17：JavaScript表单脚本
目录
-
- 一、表单基础
- 二、提交表单
- 三、表单字段的公共属性、方法、事件
-
- 1、表单字段的公共属性
- 2、表单字段的公共方法
- 3、表单字段的公共事件
- 四、输入过滤，屏蔽字符
- 五、剪切板事件
- 六、自动切换
- 七、HTML5约束验证API
-
- 1、必填字段required
- 2、更多输入类型
- 3、数值范围
- 4、输入模式
- 5、检测有效性
- 6、禁用验证
- 八、选择框编程
- 九、关注公众号哪吒编程，回复1024，获取Java学习资料，还有不定期的送书活动
一、表单基础
Web表单在HTML中以元素表示，在JavaScript中则以HTMLFormElement类型表示。
HTMLFormElement类型继承自HTMLElement类型，因此拥有与其它HTML元素一样的默认属性，不过，HTMLFormElement也有自己的属性和方法。
- acceptCharset：服务器可以接收的字符集，等价于HTML中的accept-charset属性；
- action：请求中的URL，等价于HTML中的action属性；
- elements：表单中所有控件的HTMLCollection；
- enctype：请求的编码类型，等价于HTML中的enctype属性；
- length：表单中控件的数量；
- method：HTTP请求的方法类型，通常是get或post，等价于HTML中的method方法；
- name：表单的名字，等价于HTML中的name属性；
- reset()：把表单字段重置为各自的默认值，一般情况下不建议使用；
- submit()：提交表单；
- 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、表单字段的公共属性
- disabled：布尔值，表示表单字段是否禁用；
- form：指针，指向表单字段所属的表单，这个属性是只读的；
- name：字符串，这个字段的名字；
- readOnly：只读
- tabIndex：数值，表示这个字段在按Tab键时的切换顺序；
- type：字符串，表示字段类型，比如checkbox、radio等；
- 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、表单字段的公共事件
- blur：在字段失去焦点时触发；
- change：在
和