小程序实现注册功能

页面效果：

wxml代码：

<view class="register-container">
<form bindsubmit='onSubmit'>
  <view class="section-container">
    <image class='image' src='/images/others/account.png'></image>
    <input class="common-input" name="phoneNumber" maxlength='11' type="text" placeholder="请输入账号/手机号"></input>
  </view>

  <view class="section-container">
    <image class='image' src='/images/others/username.png'></image>
    <input class="common-input" name="username" maxlength='11' type="text" placeholder="请输入昵称"></input>
  </view>

  <view class="section-container">
    <image class='image' src='/images/others/password.png'></image>
    <input class="common-input" name="pass" maxlength='15' type="password" placeholder="请输入密码"></input>
  </view>

  <view class="section-container">
    <image class='image' src='/images/others/password.png'></image>
    <input class="common-input" name="checkPass" type="password" placeholder="请重复输入密码"></input>
  </view>

  <view class="btn-area">
    <button class="btn" form-type='submit' style="background:#3775F6; color:white">注册</button>
  </view>
</form>

  <view class="reminder">
    <view class="left">
      <text>已有账号？</text>
    </view>
    <view class="right">
      <text bindtap="login">立即登录</text>
    </view>
  </view>
</view>

js代码：

Page({
  data: {
  },
  onSubmit: function (event) {
    var value = event.detail.value;
    var phoneNumber = value.phoneNumber;
    var username = value.username;
    var pass = value.pass;
    var checkPass = value.checkPass;
    this.setData({
      phoneNumber: phoneNumber,
      username: username,
      pass: pass,
      checkPass: checkPass,
    });
    var that=this;
    that.register();
  },
  register: function (event) {
    wx.clearStorageSync();
    var that = this;
    var phoneNumber = that.data.phoneNumber;
    var username = that.data.username;
    var checkNum = that.data.checkNum;
    var pass = that.data.pass;
    var checkPass = that.data.checkPass;
    if(phoneNumber==''||username==''||checkNum==''||pass==''||checkPass==''){
      wx.showToast({
        title: '信息不完整！',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }else if(pass != checkPass){
      wx.showToast({
        title: '两次密码不一致！',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }
    var checkPhone = /^1(3|4|5|7|8)\d{9}$/;
    if (!(checkPhone.test(phoneNumber))) {
      wx.showToast({
        title: '手机号错误！',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }
    var checkName = /^.{3,11}$/;
    if(!(checkName.test(username))){
      wx.showToast({
        title: '昵称为3-11位',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }
    var checkPass = /^.{6,15}$/; 
    if(!(checkPass.test(pass))){
      wx.showToast({
        title: '密码为6-15位',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }
    var utilMd5 = require('../../utils/md5.js');
    var pass = utilMd5.hexMD5(pass);
    var checkNum = utilMd5.hexMD5(checkNum);
    wx.showLoading({title: '注册中...'});
    wx.request({
      url: 'http://xxxxxxxxxx',
      method: 'POST',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: {
        phoneNumber: phoneNumber,
        username: username,
        pass: pass,
        checkNum: checkNum
      },
      success: function (res) {
        var message = (res.data.msg);
        console.log(message);
        if (message != "注册成功") {
          wx.showModal({
            title: '注册失败！',
            content: '该账户/昵称已被注册'
          });
          wx.hideLoading();
          setTimeout(function () {
            wx.redirectTo({
              url: "/pages/register/register"
            });
          }, 2000)
        } else {
          wx.hideLoading();
          wx.showModal({
            title: '注册成功',
            content: '请进行登录！'
          });
          setTimeout(function () {
            wx.redirectTo({
              url: "/pages/login/login"
            });
          }, 2000)
        }
      },
    })
  },
  login: function (event) {
    wx.redirectTo({
      url: "/pages/login/login"
    });
  }
})

wxss代码：

.register-container {
   height: 90vh;
   width: 100vw;
   display: flex;
   margin-top: 40rpx;
   flex-direction: column;
}
.section-container {
  display: flex;
  flex-direction: row;
  height: 100rpx;
  margin-top: 30rpx;
  background-color: #fff;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 5px;
}
.image {
  margin-top: 25rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  width: 50rpx;
  height: 50rpx;
}
.common-input {
  font-size: 14px;
  height: 100%;
}
.reminder {
  font-size: 12px;
  margin-top: 20rpx;
  margin-left: 450rpx;
  display: flex;

}
.right{
  color: #3775F6;
}
.btn-area {
  margin-top: 30rpx;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  align-items: center;
}