没错，这篇文章的标题是我不知道的表单登录。为啥这么说呢，因为我上次看HTML是两三年前的事情了，那时候看表单只是单纯的把表单当成一种结构，一个语义化的标签，而没有详细的去看表单究竟能做什么。这确实是一种不建议的学习方式，囫囵吞枣只求快速上手，却连枣长啥样都不知道。说回正题，这里主要介绍一些有意思的HTML5表单行为，好让我知道，其实登录可以写得更优雅点。
接下来我会列举表单登录中遇到的一些有意思的事情，主要包括以下几个方面：
- 表单自动填充
- 请求参数显示在地址栏
- 表单验证
表单自动填充
表单自动填充
一般来讲，如果你曾今登录过一个网站，并且点击了记住密码，那么当你第二次登录该网站的时候，浏览器会自动帮你填充表单信息，你只需要很方便的点击「登录」即可进入，而无需再重复输入。浏览器的这种行为确实方便了不少的用户，使得登录一步到位，但是，作为开发者而言，我们有没有办法去限定浏览器不要自动填充网页表单呢？答案是肯定的。
翻看MDN文档中关于form表单这一部分，可以看到autocomplete这个字段
用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。 可能的值有:
- off: 在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
- on: 浏览器能够根据用户之前在form里输入的值自动补全。
这段话的意思很明确了，如果想禁止浏览器自动填充表单信息，那么应该在表单的属性里使得autocomplete设置为off，这个属性也可以对表单下的input使用，以做更灵活的配置。需要注意的一点是，在chrome浏览器上，如果要使得所有表单都不自动填充，那么需要显式的设置每一项input的autocomplete="off"。
请求参数显示在地址栏？
一开始做表单登录的时候很容易的就被我忽略了这个问题，测试成功不会出现，失败了也没有注意到地址栏的变化，直到后面需要调试POST请求的时候，才发现在开发者工具里无法获取，或者说是因为失败的时候同步刷新了整个页面导致无法获取到有效的信息。注意到这里的时候，我梳理了以下两个问题：
- 登录失败会刷新整个页面
- POST的参数同步出现在地址栏
第二点在浏览器中的具体表现为：
登陆前：http://localhost:3000
登录失败后：http://localhost:3000/?username=test&password=1222#/
解决方法也很简单，主要的思路就是监听表单的submit事件，在表单提交的时候取消默认动作，具体处理方式如下：
//Vue 组件
//login为表单的处理方法
<form @submit.prevent="login">
<input type="text" />
<button type="submit">提交</button>
</form>
//原生处理方法
var form = document.getElementById('formId');
form.onsubmit = function(e) {
//在此处理逻辑
//取消事件的默认动作
e.preventDefault();
}
讲到这里顺便说下表单的提交方式，主要为以下两种：
- <form action="yourPostUrl" method="post">
- ajax的post请求
第一种方式提交表单信息主要用于登录，优点就是常用、语义化，少了一些不必要的麻烦；缺点也很明显，无法获取响应信息，一般form表单登录之后都是由后端去处理逻辑，并且由后端重定向到某个页面。那么，如果前端是单页应用SPA怎么办？解决方法不止一种，这里采用后端逻辑处理完响应给前端信息，由前端做跳转操作，也就是第二种表单提交方式，通过ajax post
import axios from 'axios'
//采用qs库对提交参数进行处理
import qs from 'qs'
//这里采用axios
let param = {
username: 'xxx',
password: 'xxx'
}
//这里有坑的地方在，你post的参数必须经过特殊编码处理
axios.post('yourPostUrl', qs.stringify(param)).then(() => {
//成功
}).catch(() => {
//失败
})
表单验证
表单验证在我的印象里一直以来都是JS在处理，重新看了HTML5的form文档后，我才知道原来有一些简单的验证交给表单的相关属性就好了
根据type验证
HTML5在<input>内置了很多type，如果设置了某些特定的type属性，那么浏览器自动对用户的输入进行验证，比如设置了<input type="url" />
type=url
根据 min/max 进行验证
当设置的type为number时，还可以同时设置输入的最大值和最小值，比如<input type="number" max="2.5" />
限定最大值
让表单成为必填
如果某个字段是必填的，可以给它添加required属性，支持这个属性的浏览器可能会做出一些外观/交互上的变化，比如<input type="text" required>
限定不能为空
总结
以上列举的只是我在工作中偶然发现的一些问题，HTML5表单的很多新特性没有贴出来。在此感慨HTML5强大的同时，也对自己忽略了这些而惭愧，很多事情如果不持续学习很容易就被时代抛弃，比如web技术，如果不知道表单新特性，而通过js来模拟验证反而耗费多一些时间，而且不知道出啥错。嗯，告诫自己持续学习吧
网友评论