微信小程序登陆注册界面前后端完整代码展示

微信小程序登陆注册界面前后端代码展示

一首先是前端页面效果图


二 登陆限制
登陆没设置太多限制，都输入正确就登陆成功，失败就显示下图

三 注册限制
注册主要现在三点
1 用户名不能重复，否则显示下图效果

2 前后密码必须一致，否则显示下图效果

3 任意位置不能为空，否则显示下图效果

同时满足上面三点则注册成功跳转到登陆界面（其他验证方法可自行选择添加，方式相同）

四 登陆部分完整代码
1 微信前端代码

```java

wxml部分

<view id="total">
<image src="img/111.png"></image>
<form bindsubmit="create_login">
<view id="t1">
<text>账号</text><input type="text" name="username" id="use" placeholder="输入您的账号" value="{
   {username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" name="password" id="pass1" placeholder="输入您密码" value="{
   {password}}"></input>
</view>
<view id="t3">
<text>手机号后四位</text><input type="password" name="phone" id="pass2" placeholder="输入您的手机尾号" value="{
   {phone}}"></input>
</view>
<button bindtap="goto_index" id="btn1" form-type="submit"><text>登陆</text></button>
</form>

<button bindtap="goto_zhuce" id="btn2"><text>注册</text></button>
<button bindtap="goto_update" id="btn3"><text>忘记密码</text></button>

</view>

wxss

#total{
   
  width:100%;
  height:1300rpx;
  background-color: rgb(245,245,245);
}
image{
   
  width:150rpx;
  height:150rpx;
  position: relative;
  left:300rpx;
  top:100rpx;
}
#t1{
   
  width:100%;
  height:125rpx;
  background-color: white;
  position: relative;
  top:200rpx;
}
#t2{
   
  width:100%;
  height:125rpx;
  background-color: white;
  position: relative;
  top:210rpx;
}
#t3{
   
  width:100%;
  height:125rpx;
  background-color: white;
  position: relative;
  top:220rpx;
}
#t1 text{
   
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#use{
   
  width:400rpx;
  height:80rpx;
  margin-left: 200rpx;
  position: relative;
  bottom: 25rpx;
}
#t2 text{
   
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass1{
   
  width:400rpx;
  height:80rpx;
  margin-left: 200rpx;
  position: relative;
  bottom: 25rpx;
}
#t3 text{
   
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass2{
   
  width:400rpx;
  height:80rpx;
  margin-left: 320rpx;
  position: relative;
  bottom: 25rpx;
}
#btn1{
   
  position: relative;
  top:350rpx;
  background-color:rgb(51, 204, 170);
  width:600rpx;
  border-radius: 50rpx;
}
#btn1 text{
   
  color:white;
  font-size: 39rpx;
}
#btn2{
   
  position: relative;
  top:370rpx;
  right:230rpx;
  background-color: rgb(245, 245, 245);
}
#btn2::after{
   
  border: none;
}
#btn2 text{
   
  color:black;
  font-size: 39rpx;
}
#btn3{
   
  position: relative;
  top:261rpx;
  left:200rpx;
  width:250rpx;
  background-color: rgb(245, 245, 245);
}
#btn3::after{
   
  border: none;
}
#btn3 text{
   
  color:black;
  font-size: 39rpx;
}

js

``

data: {
   
    
  },

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