微信小程序表单验证-微信小程序做表单验证

一、登录流程

1.收集表单项数据

2.前端验证

（1）验证用户信息（账号密码）是否合法

(2) 前端验证失败提示用户，不向后端发送请求

（3）前端验证通过后微信小程序表单验证，向服务器发送请求（携带账号密码）

3. 后台验证

(1) 验证用户是否存在

(2)用户不存在直接返回，告诉前端用户不存在

(3) 用户的存在需要验证密码是否正确

(4)如果密码不正确微信小程序表单验证，返回前端提示密码错误

（5）密码正确返回前端数据，提示用户登录成功（会携带用户的相关信息）

2.本地存储

后台获取的用户数据返回到个人登录界面，需要本地存储。 首先将从服务器获取的数据返回到本地存储。

wx.setStorageSync('userInfo', JSON.stringify(result.profile))

然后从本地缓存中同步获取指定key的内容

let userInfo = wx.getStorageSync('userInfo')

登录页面界面

  
    LOGIN
    
      欢迎回来！
    
    
      
        手机号码
        
      
      
        密码
        
      
    
    登录
    
      忘记密码?
    
  
  
    还没有账号?
    马上注册
  

登录页面的js

import request from '../../utils/request.js'
Page({
  /**
   * 页面的初始数据
   */
  data: {
     phone:'', //手机号
     password:''//用户密码
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
   //表单项内容发生改变的回调
  handleInput(event){
     // let type = event.currentTarget.id;  //id传值
      //  console.log(type, event.detail.value);
      let type = event.currentTarget.dataset.type; //data-type=value
      this.setData({
        [type]: event.detail.value
      })
  },
    //登录的回调
    async login(){
      //1、收集表单数据
      let{phone,password} = this.data;
      //2、前端验证
      /*
        1、内容为空
        2、手机号格式不正确
        3、手机号格式正确，验证通过
       */
      if(!phone){
        //提示用户
        wx.showToast({
          title:"手机号不能为空",
          icon:'none'
        })
        return;
      }
      //定义正则表达式
      let phoneReg =/^1(3|4|5|6|7|8|9)\d{9}$/;
      if(!phoneReg.test(phone)){
        wx.showToast({
          title: "手机号不正确",
          icon: 'none'
        })
        return;
      }
       if(!password){
         wx.showToast({
           title: "密码不能为空",
           icon: 'none'
         })
         return;
       }
       //后端验证
      let result = await request('/login/cellphone',{phone,password})
      if(result.code === 200){
        wx.showToast({
          title: '登录成功',
        })
        //将用户信息存储至本地
       wx.setStorageSync('userInfo', JSON.stringify(result.profile))
        //跳转至个人中心
        wx.reLaunch({
          url: '/pages/personal/personal',
        })
      }
      else if(result.code === 400){
        wx.showToast({
          title: '手机号错误',
          icon:'none'
        })
      }else if(result.code === 502){
        wx.showToast({
          title: '密码错误',
          icon:'none'
        })
      }else{
        wx.showToast({
          title: '登录失败',
          icon:'none'
        })
      }
    },

个人中心界面

  
    
    
      
        
      
      
        {{userInfo.nickname?userInfo.nickname:'游客'}}
      
    
    
      
      
        立即开通
      
      
        
        
        硅谷会员
      
      atguigu Union
      开通会员听歌, 撸代码
    
  
  
    
    
    
      
        
        我的消息
      
      
        
        我的好友
      
      
        
        个人主页
      
      
        
        个性装扮
      
    
    
    
      
        最近播放
        
      
      
        
          我的音乐
           > 
        
        
          我的收藏
           > 
        
        
          我的电台
           > 
        
      
    
  

个人中心js

let startY =0;    //手指起始的坐标
let moveY = 0;    //手指移动的坐标
let moveDistance = 0;  //手指移动的距离
Page({
  /**
   * 页面的初始数据
   */
  data: {
    coverTransform :"translateY(0)",
    coverTransition:'',
    userInfo:{} ,//用户信息
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //读取用户基本信息
    let userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
       //更新userinfo状态
       this.setData({
         userInfo:JSON.parse(userInfo)
       })
    }
  },
  handleTouchStart(event){
    //手指开始点时先把过渡效果去掉
    this.setData({
      coverTransition:''
    })
    //获取手指起始的坐标
    startY = event.touches[0].clientY;
  },
  handleTouchMove(event) {
    moveY = event.touches[0].clientY;
    moveDistance = moveY - startY;
    if(moveDistance<=0){
      return;
    }
    if (moveDistance>=80){
      moveDistance = 80;
    }
    //动态更新coverTransform的状态值
    this.setData({
      coverTransform:`translateY(${moveDistance}rpx)`
    })
  },
  handleTouchEnd(event) {
    //动态更新coverTransform的状态值
    this.setData({
      coverTransform: `translateY(0rpx)`,
      coverTransition:'transform 1s linear'
    })
  },
  //跳转至登录页面的回调
  toLogin(){
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
})