看这篇文章之前,你需要掌握的知识:
创新互联是一家专注于成都网站制作、网站设计和雅安机房托管的网络公司,有着丰富的建站经验和案例。form 可以说是 web 开发中的大的难题之一。跟普通的组件相比,form 具有以下几个特点:
1、更多的用户交互。
这意味着可能需要大量的自定义组件,比如 DataPicker,Upload,AutoComplete 等等。
3、频繁的状态改变。
每当用户输入一个值,都可能会对应用状态造成改变,从而需要更新表单元素或者显示错误信息。
3、表单校验,也就是对用户输入数据的有效性进行验证。
表单验证的形式也很多,比如边输入边验证,失去焦点后验证,或者在提交表单之前验证等等。
4、异步网络通信。
当用户输入和异步网络通信同时存在时,需要考虑的东西就更多了。就比如 AutoComplete,需要根据用户的输入去异步获取相应的数据,如果用户每输入一次就发起一次请求,会对资源造成很大浪费。因为每一次输入都是异步
获取数据的,那么连续两次用户输入拿到的数据也有可能存在 "后发先至" 的问题。
正因为以上这些特点,使 form 的开发变得困难重重。在接下来的章节中,我们会将 RxJS 和 Form 结合起来,帮助我们更好的去解决这些问题。
HTML Form在实现我们自己的 Form 组件之前,让我们先来参考一下原生的 HTML Form。
保存表单状态
对于一个 Form 组件来说,需要保存所有表单元素的信息(如 value, validity 等),HTML Form 也不例外。
那么,HTML Form 将表单状态保存在什么地方?如何才能获取表单元素信息?
主要有以下几种方法:
表单节点。document.forms[0].elements[0].value; // 获取第一个 form 中第一个表单元素的值 const form = document.querySelector("form"); form.elements[0].value; form.addEventListener('submit', function(event) { console.log(event.target.elements[0].value); });