表单校验
本篇主要介绍使用 JavaScript 进行表单验证。
表单验证并不是 JavaScript 提供的某种特性,而是结合各种特性达到的一种目的,是需求的产物。
所有线上产品的表单几乎都有验证,如注册时要求“用户名 6-16 位”,验证会由 JavaScript 来完成,通常为了安全性和准确性,服务端会再次做一遍验证。
1. 验证目标
表单用于收集信息,从 HTML 上讲,表单内容使用 form
标签进行包裹。
<form action="/login">
<label>
用户名:<input type="text">
</label>
<label>
密码:<input type="text">
</label>
<div>
<button type="submit">登入</button>
</div>
</form>
代码块
预览复制
这就是一个相对简单的表单,其中包含文本框(input标签)与按钮(button标签),并使用 form 标签进行包裹。
利用 form 标签,再触发其 submit 事件时,会将表单内容收集后提交个体 action
属性配置的路径。
单其实把 form 标签去掉,在页面上展示的效果几乎是一样的。
<label>
用户名:<input type="text">
</label>
<label>
密码:<input type="text">
</label>
<div>
<button type="submit">登入</button>
</div>·
代码块
预览复制
所以自出现 AJAX 技术后,很多开发者都不再书写 form 标签,直接使用其他元素对表单内容进行包裹,因为业务上可能不需要使用 form 标签的特性来提交表单。
其实不论是使用表单,还是不使用表单,表单的验证都是针对所有表单项的,即输入框、单选项、多选项等。
在表单提交之前,需要对写着表单项的内容做校验,然后拦截提交操作。
2. 获取表单内容
获取表单内容,实际上就是取到表单项对应的 DOM 节点的值。
获取 DOM 节点的方式非常多,前面的章节也有介绍。
<style>
h3 {margin-top: 0;color: #4caf50;}
.login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);}
.form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;}
.form-item