微信小程序云开发 注册页面编写

编写一个微信小程序实现注册功能。

开发平台：微信开发者工具

创建一个rg页面用于编写注册页：

在注册时会判断用户输入的信息：

1. 如果为空，则提示"输入的用户名为空"
   

2. 如果密码小于6位或大于12位，则提示"密码为6位至12"
   

3. 如果确认密码和原密码不同，则提示"确认密码输入错误"
   

4. 如果都正确控制台则显示"信息正确,可以注册"。
   

rg.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    warning:'',
    key:false,
    account:'',
    password:'',
    repassword:''
  },
  getaccount(e){
    console.log("输入的用户名",e.detail.value)
    this.setData({
      account:e.detail.value
    })
  },
  getpsw(e){
    console.log("输入的密码",e.detail.value)
    this.setData({
      password:e.detail.value
    })
  },
  getrepsw(e){
    console.log("输入的确认密码",e.detail.value)
    this.setData({
      repassword:e.detail.value
    })
  },
  submit(e) {
    let ac = this.data.account
    let ps = this.data.password
    let rps = this.data.repassword
    if(ac.length<1){
      wx.showToast({
        title: '用户名不能为空',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else if (ps.length < 6 || ps.length > 12) {
      wx.showToast({
        title: '密码为6位至12位',
        mask:true,
        icon:'none',
        duration:1000
      })
      console.log("密码为6位至12位")
    }
    else if(rps!=ps){
      wx.showToast({
        title: '确认密码输入错误',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else{
      console.log("信息正确,可以注册")
    }
  }
})

rg.json

{
  "usingComponents": {}
}

注册页面的注册图：（需要添加到小程序的images文件里面）

rg.wxml

<image class="pic" src="../../images/register.png" mode="widthFix"></image>
<view>
  <view class="title">用户名：</view>
  <input class="input" name="stuno" placeholder="请输入您的用户名" type="number" bindinput="getaccount" maxlength="11"></input>
  <view class="title">密码：</view>
  <input class="input" name="password" placeholder="请设置您的密码" bindinput="getpsw" password></input>
  <input class="input" name="repassword" placeholder="请重复您的密码" bindinput="getrepsw" password></input>
</view>
<button class="btn" hover-class="anxia" bindtap="submit">注册</button>

rg.wxss

/* pages/rg/rg.wxss */
.pic{
  display:flex;
  width: 100%;
  justify-content: center;
  align-items:center;

}

.title{
  margin-left: 20rpx;
}
.input{
  border-bottom:solid;
  border-color: gainsboro;
  margin-top:10rpx;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10rpx;
  border-width: 4rpx;
}

.btn{
  font-size: 10pt;
  height: 55rpx;
  background: #ffcc01;
  color: black;
  text-align: center;
  border-radius: 50px;
  margin: 30% 20% 30% 20%;
}