利用jqery layui快速构建网页登录校验页面！

实现功能
1.支持登陆账号
2.支持注册用户名
线上演示地址

github代码仓库

、

重点知识点整理

// A code block
var foo = 'bar';

// An highlighted block
$(function(){
  //点击去注册账号的链接
  $('#link_reg').on('click',function(){
   $('.login-box').hide()
   $('.reg-box').show()
  })
  
  //点击去登陆的链接
  $('#link_login').on('click',function(){
    $('.reg-box').hide()
    $('.login-box').show()
   })
   
 var form = layui.form
 var layer=layui.layer
 form.verify({
   pwd:[
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ],
  repwd: function(value) {
    // 通过形参拿到的是确认密码框中的内容
    // 还需要拿到密码框中的内容
    // 然后进行一次等于的判断
    // 如果判断失败,则return一个提示消息即可
    var pwd = $('.reg-box [name=rpassword]').val()
    if (pwd !== value) {
      return '两次密码不一致！'
    }
  } 
 })

 //监听注册表提交事件

 $('#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()
  })
})

 //监听登陆表提交事件
 $('#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('登陆成功')
      localStorage.setItem('token', res.token)
      //跳转到后台主页
      location.href='/cenlitCode/index.html'
      

       }
     })
 })
})