目录
1页面实现细节描述
简单来说就是一个 登录注册系统，我在前面也讲过了，只不过前面讲的是用POSTMAN进行的接口模拟 ，并没有实现真正意义上的网页上的数据传输，因此我们要学会登录系统的原理，以及能动手写出一个简单的登录系统，至于接口的话，也就是说我们的POST请求用另外一个接口进行请求数据，我们以前的服务器都是搭建在本地浏览器，而这个项目我使用了别人的一个API接口，也就是说服务器端在其他地方。
2页面实现HTML框架
在页面中主要使用LayUI框架进行开发?Layui - 经典开源模块化前端 UI 框架
这个模块的优点就是比较简单，易懂，真正的从最基础的东西帮助我们进行封装。但是注意的是一定要引用layui.css文件和layui.all.js文件，这样才能全局生效。下面我来简要介绍一下其中有意思的模块。在外层是form表单元素，内层两个div和一个登录按钮。关键是这两个div结构相同，一个是用户名框，一个是密码框，其中需要注意的属性是lay-verify证明这两个输入框的内容是必须填写的。我们可能注意到密码框中有一个pwd这是个自定义属性，在后续文章中再介绍。
//登录的表单
<form class="layui-form" id="form_login">
<!-- 用户名 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-username"></i>
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
</div>
<!-- 密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" />
</div>
<!-- 登录按钮 -->
<div class="layui-form-item">
<!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 -->
<button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>登录</button>
</div>
<div class="layui-form-item links">
<a href="javascript:;" id="link_reg">去注册账号</a>
</div>
</form>
<!-- 注册的表单 -->
<form class="layui-form" id="form_reg">
<!-- 用户名 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-username"></i>
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
</div>
<!-- 密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" />
</div>
<!-- 密码确认框 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off" class="layui-input" />
</div>
<!-- 注册按钮 -->
<div class="layui-form-item">
<!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 -->
<button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>注册</button>
</div>
<div class="layui-form-item links">
<a href="javascript:;" id="link_login">去登录</a>
</div>
</form>然后我们是在每个输入框前定义了两个图标，一个是username一个password的图标，在官网上都可以找到，以前我们都是用iconfonts导入的功能，比较繁琐，现在有一些现成的图标，可以直接引用，对于新手来说，比较友好。
3页面浏览器端JS代码
对于上面所说的一个pwd属性和一个repwd密码校验，可以理解为对密码的一个设置规则，常规来说只是要求密码不为空，因此我们可以用正则表达式加以限制，如下所示对于repwd来说，我们也可以用函数来加以限制。
// 从 layui 中获取 form 对象
var form = layui.form
var layer = layui.layer
// 通过 form.verify() 函数自定义校验规则
form.verify({
// 自定义了一个叫做 pwd 校验规则
pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
// 校验两次密码是否一致的规则
repwd: function(value) {
// 通过形参拿到的是确认密码框中的内容
// 还需要拿到密码框中的内容
// 然后进行一次等于的判断
// 如果判断失败,则return一个提示消息即可
var pwd = $('.reg-box [name=password]').val()
if (pwd !== value) {
return '两次密码不一致！'
}
}
})4页面请求JS代码
对于一个简单的登录注册页面来说，存在两种请求，一种是注册表单的提交事件，另一种是登录表单的提交事件。通俗来理解，也就是说我需要先进行注册账号，设置用户名和密码，确认密码，并将这些参数通过一个接口，传递给接口那边的服务器，那边的服务器就会发送给浏览器注册成功的信息。当我们知道注册成功后，就可以进行登录。以下是注册代码。
$('#form_reg').on('submit', function(e) {
// 1. 阻止默认的提交行为
e.preventDefault()
// 2. 发起Ajax的POST请求
var data = {
username: $('#form_reg [name=username]').val(),
password: $('#form_reg [name=password]').val()
}
$.post('/api/reguser', data, function(res) {
if (res.status !== 0) {
return layer.msg(res.message)
}
layer.msg('注册成功，请登录！')
// 模拟人的点击行为
$('#link_login').click()
})
})在登录表单的提交事件，通过获取表单的用户名和密码，传递给服务器，如果相应成功，就说明登录成功，此时我们就要将登录成功得到的token字符串。把这个字符串保存在localStorage中，并且跳转到主页面
$('#form_login').submit(function(e) {
// 阻止默认提交行为
e.preventDefault()
$.ajax({
url: '/api/login',
method: 'POST',
// 快速获取表单中的数据
data: $(this).serialize(),
success: function(res) {
if (res.status !== 0) {
return layer.msg('登录失败！')
}
layer.msg('登录成功！')
// 将登录成功得到的 token 字符串，保存到 localStorage 中
localStorage.setItem('token', res.token)
// 跳转到后台主页
// location.href = '/index.html'
location.href = '/day1（1-3小节）/code/index.html'
}
})
})总的来说这个验证表单的知识点已经梳理的很清楚了，从最开始的注册到登录，也就是登录成功后会得到服务器反馈的一个token我们把这个token保存下来，下次就会自动保留记忆。
