微信小程序实现登录页面及表单验证

简介

本文主要围绕微信小程序自定义登录页面布局及常规校验，完成登录操作。

效果图

效果图

功能点

1.常规登录页面布局
2.表单验证 登录号码 密码非空校验提示，长度控制等常规操作
3.表单提交
4.轮播图
5.本地缓存功能

login.wxml

<view class="login_page">
    <swiper class="banner" indicator-dots autoplay circular>
    <swiper-item wx:for="{{swiperImageList}}" wx:key="index">
      <image mode="widthFix" src="{{item.swiperImageUrl}}"></image>
    </swiper-item>
  </swiper>
    <form bindsubmit="login">
        <view class="phone_number">
            <text>手机号码</text><input type="number" maxlength="11" name="phoneNumber" class="in_phone_number" placeholder="输入手机号码"
                value="{{phoneNumber}}"></input>
        </view>
        <view class="auth_pwd">
            <text>登录密码</text><input type="password" name="authPwd" class="in_auth_pwd" placeholder="输入登录密码"
                value="{{authPwd}}"></input>
        </view>
        <button bindtap="goto_index" class="btn_login" form-type="submit"><text>登陆</text></button>
    </form>
    <view class="btn_bottom">
        <navigator url="/pages/register/register" class="btn_reg">
            <text>注册</text>
        </navigator>
       <navigator class="btn_forget_pwd">
            <text>忘记密码</text>
       </navigator>
    
    </view>

</view>

login.js

import {
  request
} from "../../request/request";
import {
  regeneratorRuntime
} from "../../request/runtime";
import WxValidate from "../../utils/WxValidate.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperImageList: [],
    phoneNumber: "",
    authPwd: ""
  },
  // 存储轮播图集合
  swiperImageListCates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initValidate();
    this.initSwiperList();
  },


  // 初始化轮播图
  initSwiperList() {
    const swiperImageListCates = wx.getStorageSync('swiper_image_list');
    if (!swiperImageListCates) {
      this.swiperImageList();
    } else {
      // 判断缓存中的"订单类型"数据是否超时
      if (Date.now() - swiperImageListCates.time > 1000 * 60 * 60 * 24 * 15) {
        this.swiperImageList();
      } else {
        this.swiperImageListCates = swiperImageListCates.data;
        this.setData({
          swiperImageList: this.swiperImageListCates
        });
      }
    }
  },
  //获取轮播图数据
  async swiperImageList() {
    console.log('开始请求')
    const res = await request({
      url: "/pub/querySwiperList/0",
      method:"GET",
    })
    if (res.code == 200) {
      if (res.data.length > 0) {
        this.swiperImageListCates = res.data;
        // 存入缓存
        wx.setStorageSync('swiper_image_list', {
          time: Date.now(),
          data: this.swiperImageListCates
        });
        this.setData({
          swiperImageList: res.data
        });
      }
    }
  },
  /*登录 */
  login(e) {
    let formData = e.detail.value;
    if (!this.WxValidate.checkForm(formData)) {
      //表单元素验证不通过，此处给出相应提示
      let error = this.WxValidate.errorList[0];
      this.showModal(error);
      return false;
    };
    request({
      url: "/user/login",
      method: "POST",
      data: formData
    }).then(res => {
      console.log(res)
      if (res.code != 200) {
        wx.showToast({
          title: res.msg,
          icon: "error"
        })
        return;
      }
      wx.setStorageSync('access_token',res.data.accessToken);
      wx.setStorageSync('refresh_token',res.data.refreshToken); 
      wx.setStorageSync('user_id',res.data.userId);
      this.queryUserInfo(res.data.userId);// 获取用户信息
    });

  },

async queryUserInfo(userId){
  const res = await request({
    method:"GET",
    url:"/user/queryUserInfoById/"+userId,
  });
  wx.setStorageSync('user_info',res.data)

},

  /*校验数据 */
  initValidate() {
    let rules = {
      phoneNumber: {
        required: true,
      },
      authPwd: {
        required: true,
      },
    }

    let message = {
      phoneNumber: {
        required: '请输入手机号码',
      },
      authPwd: {
        required: '请输入登录密码',
      },
    }
    //实例化当前的验证规则和提示消息
    this.WxValidate = new WxValidate(rules, message);
  },
  /**错误提示 */
  showModal(error) {
    wx.showToast({
      title: error.msg,
      icon: 'none',
      duration: 1000
    })
  },
})

login.wxss

page{
  background-color:var(--pageBackgroundColor);
}

.login_page {
  width: 100%;
  height: 1300rpx;
}

/**我的-轮播图*/
.login_page .banner{
  height: 450rpx;
}

.login_page .banner image{
  height: 100%;
  width: 100%;
}

.login_page .phone_number {
  width: 100%;
  height: 125rpx;
  background-color: white;
  position: relative;
  top: 20rpx;
}

.login_page .auth_pwd {
  width: 100%;
  height: 125rpx;
  background-color: white;
  position: relative;
  top: 30rpx;
}

.login_page .phone_number text {
  position: relative;
  left: 40rpx;
  top: 40rpx;
}

.login_page .phone_number .in_phone_number {
  width: 500rpx;
  height: 80rpx;
  margin-left: 200rpx;
  position: relative;
  bottom: 20rpx;
  text-align: right;
}

.login_page .auth_pwd text {
  position: relative;
  left: 40rpx;
  top: 40rpx;
}

.login_page .auth_pwd .in_auth_pwd {
  width: 500rpx;
  height: 80rpx;
  margin-left: 200rpx;
  position: relative;
  bottom: 20rpx;
  text-align: right;
}


.login_page .btn_login {
  top: 100rpx;
  background-color:var(--themeColor);
  width: 600rpx;
  border-radius: 50rpx;
}

.login_page .btn_login text {
  color:var(--viewBackgroundColor);
  font-size: 39rpx;
}

.login_page .btn_bottom {
  display: flex;
  flex-direction: row;
  padding-top: 150rpx;
  height: 100rpx;
  padding-left: 150rpx;
}

.login_page .btn_bottom .btn_reg  {
  font-size:30rpx;
  font-weight: bold;
  background-color: var(--pageBackgroundColor);
}

.login_page .btn_bottom .btn_forget_pwd  {
  font-size:30rpx;
  font-weight: bold;
  background-color: var(--pageBackgroundColor);
  padding-left: 300rpx;
}