小程序云开发之注册页面

小程序云开发之注册页面

wxml：

<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <!-- 账号 -->
    <view class="user">
      <view>用户名:</view>
      <input name="username" placeholder="请输入账号" />
    </view>
    <!-- 密码 -->
    <view class="user">
      <view >密  码：</view>
      <input name="passwd" placeholder="请输入密码" password />
    </view>
    <!-- 手机号 -->
    <view  class="user">
      <view>手机号:</view>
      <input type="number" name="phoneNumber" maxlength="11" placeholder="请输入手机号" />
    </view>
    <!-- 提交重置按钮 -->
    <view class="btn-area">
      <button class="sumbit" formType="submit" type="primary">提交</button>
      <button formType="reset" type="primary">清除</button>
    </view>
  </form>
</view>

wxss：

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 100rpx 0;
  box-sizing: border-box;
}
.user{
  display: flex;
  margin-top: 50rpx;
}
.user input{
  font-size: smaller;
  border: 1px solid #a5a5a5;
  margin-left: 30rpx;
  margin-right: 10rpx;
  padding: 10rpx 0;
}
.sumbit{
  margin: 50rpx 0;
}

js：

创建数据库集合：
点击云开发—>点击数据库—>点击+号—>输入集合名称创建集合

const app = getApp()
const DB=wx.cloud.database().collection("users")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  formSubmit:function(e){
    let username = e.detail.value.username; //用户名
    let password = e.detail.value.passwd; //密码
    let phone = e.detail.value.phoneNumber; //电话号
    let that=this;
    let flag=false //判断是否存在，存在时为true
    let checkPhone = /^1(3|4|5|7|8)\d{9}$/;
    let checkPass = /^.{6,15}$/; 
    
    // 判断用户名,密码,手机号是否为空
    if(username === '' && password === '' && phone === ''){
      wx.showToast({
        title: '用户名，密码，电话不能为空！',
        icon: 'none',
        duration: 1500
      })
      return
    }
    //校验账号
    if (username.length === 0) {
      wx.showToast({
        icon: 'none',
        title: '账号不能为空，请输入您的账号',
      })
      return
    }
    // 验证密码
    if(!(checkPass.test(password))){
      wx.showToast({
        title: '密码为6-15位',
        duration: 2000,
      })
      return false;
    }
    // 验证手机号
    if (!(checkPhone.test(phone))) {
      wx.showToast({
        title: '手机号错误！',
        duration: 2000,
      })
      return false;
    }
    
    //查询用户是否注册
    DB.get({
      success:(res)=>{
        let users = res.data;
        for(let i=0;i<users.length;i++){
          if(username===users[i].username){//用户存在
            flag=true;
            // console.log('账户已经注册');
          }
        }
        if(flag===true){
          wx.showToast({
            icon: 'none',
            title: '账户已经注册！',
          })
        }else{
          DB.add({
            data: {
              username: username,
              password: password,
              phone:phone,
            },
            success(res) {
              wx.navigateTo({
                url: '/pages/login/login',
              })
            },
            fail(res) {
              wx.showToast({
                icon: 'none',
                title: '注册失败，请重新注册！',
              })
            }
          })
        }
      }
    })
  }
})

执行效果截图：