最终效果展示图
register.wxml
<!--pages/register/register.wxml-->
<view>
<view class="logo_view">
<image class="logo" src="../../img/register_logo.png"></image>
</view>
<view class="register_type">
<view class="phone_register {
{registerParam?'selected':'unselected'}}" bindtap="phoneRegister">手机号注册</view>
<view class="email_register {
{registerParam?'unselected':'selected'}}" bindtap="emailRegister">邮箱注册</view>
</view>
<view>
<form>
<view wx:if="{
{registerParam}}" class="phone_num input_view {
{focusPhoneNum?'focus':'blur'}}">
<input type="number" placeholder="请输入手机号" focus="focus" bindfocus="focusPhoneNum" bindblur="blurPhoneNum"></input>
<button class="getVerificationCode">获取验证码</button>
</view>
<view wx:else class="email input_view {
{focusEmail?'focus':'blur'}}">
<input placeholder="请输入邮箱" focus="focus" bindfocus="focusEmail" bindblur="blurEmail"></input>
<button class="getVerificationCode">获取验证码</button>
</view>
<view class="verification_code input_view {
{focusVerificationCode?'focus':'blur'}}">
<input placeholder="请输入验证码" bindfocus="focusVerificationCode" bindblur="blurVerificationCode"></input>
</view>
<view class="stu_number input_view {
{focusStuNumber?'focus':'blur'}}">
<input type="number" placeholder="请输入学号" bindfocus="focusStuNumber" bindblur="blurStuNumber"></input>
</view>
<view class="username input_view {
{focusUserName?'focus':'blur'}}">
<input placeholder="请输入用户名" bindfocus="focusUserName" bindblur="blurUserName"></input>
</view>
<view class="password input_view {
{focusPassword?'focus':'blur'}}">
<input type="password" placeholder="请输入密码" bindfocus="focusPassword" bindblur="blurPassword"></input>
</view>
<view class="repassword input_view {
{focusRePassword?'focus':'blur'}}">
<input type="password" placeholder="确认密码" bindfocus="focusRePassword" bindblur="blurRePassword"></input>
</view>
<button class="submit" form-type="submit" bindtap="submit">注册</button>
</form>
</view>
</view>
register.wxss
/* pages/register/register.wxss */
.logo_view {
width: 750rpx;
display: flex;
justify-content: center;
}
.logo {
width: 400rpx;
height: 200rpx;
}
.register_type {
width: 90%;
margin: 0 auto;
margin-bottom: 30rpx;
display: flex;
justify-content: space-evenly;
}
.phone_register,
.email_register {
width: 30%;
line-height: 200%;
text-align: center;
}
.selected {
color: #008bff;
border-bottom: 4rpx solid #008bff;
}
.unselected {
color: rgb(204, 204, 204);
border-bottom: 4rpx solid rgb(204, 204, 204);
}
.input_view {
width: 80%;
height: 100rpx;
margin: 0 auto;
border: 1px solid gainsboro;
border-radius: 10rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
padding-left: 50rpx;
}
.focus {
border: 1px solid #008bff;
}
.blur {
border: 1px solid gainsboro;
}
.error {
border: 1px solid red;
}
.getVerificationCode {
line-height: 100rpx;
font-size: 26rpx;
width: 250rpx;
}
.submit {
width: 87%;
margin-top: 40rpx;
background-color: #008bff;
color: white;
}
register.js
js代码写得有点乱，主要是为了控制部分样式变化和表单验证
// pages/register/register.js
Page({
/**
* 页面的初始数据
*/
data: {
registerParam: 1, //1：手机号注册；0：邮箱注册
focusPhoneNum: false,
focusEmail: false,
focusVerificationCode: false,
focusStuNumber: false,
focusUserName: false,
focusPassword: false,
focusRePassword: false,
phoneNum: "",
email: "",
verificationCode: "",
stuNumber: "",
userNumber: "",
password: "",
rePassword: ""
},
phoneRegister: function () {
this.setData({
registerParam: 1,
})
},
emailRegister: function () {
this.setData({
registerParam: 0
})
},
focusPhoneNum: function () {
this.setData({
focusPhoneNum: true
})
},
focusEmail: function () {
this.setData({
focusEmail: true
})
},
focusVerificationCode: function () {
this.setData({
focusVerificationCode: true
})
},
focusStuNumber: function () {
this.setData({
focusStuNumber: true
})
},
focusUserName: function () {
this.setData({
focusUserName: true
})
},
focusPassword: function () {
this.setData({
focusPassword: true
})
},
focusRePassword: function () {
this.setData({
focusRePassword: true
})
},
blurPhoneNum: function (e) {
this.setData({
focusPhoneNum: false,
phoneNum: e.detail.value
})
let myreg = /^1[3456789]\d{9}$/;
if (e.detail.value == "") {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
})
} else if (!myreg.test(e.detail.value)) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1000
})
}
},
blurEmail: function (e) {
this.setData({
focusEmail: false,
email: e.detail.value
})
let myreg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if (e.detail.value == "") {
wx.showToast({
title: '邮箱不能为空',
icon: 'none',
duration: 1000
})
} else if (!myreg.test(e.detail.value)) {
wx.showToast({
title: '请输入正确的邮箱',
icon: 'none',
duration: 1000
})
}
},
blurVerificationCode: function (e) {
this.setData({
focusVerificationCode: false,
verificationCode: e.detail.value
})
},
blurStuNumber: function (e) {
this.setData({
focusStuNumber: false,
stuNumber: e.detail.value
})
let myreg = /^(31|32)\d{8}$/;
if (e.detail.value == "") {
wx.showToast({
title: '学号不能为空',
icon: 'none',
duration: 1000
})
} else if (!myreg.test(e.detail.value)) {
wx.showToast({
title: '请输入正确的学号',
icon: 'none',
duration: 1000
})
}
},
blurUserName: function (e) {
this.setData({
focusUserName: false,
userNumber: e.detail.value
})
if (e.detail.value == "") {
wx.showToast({
title: '用户名不能为空',
icon: 'none',
duration: 1000
})
}
},
blurPassword: function (e) {
this.setData({
focusPassword: false,
password: e.detail.value
})
if (e.detail.value == "") {
wx.showToast({
title: '密码不能为空',
icon: 'none',
duration: 1000
})
} else if (e.detail.value.length < 6) {
wx.showToast({
title: '密码不得少于6位',
icon: 'none',
duration: 1000
})
}
},
blurRePassword: function (e) {
console.log(this.data.password);
this.setData({
focusRePassword: false,
rePassword: e.detail.value
})
if (e.detail.value == "") {
wx.showToast({
title: '请确认密码',
icon: 'none',
duration: 1000
})
} else if (e.detail.value != this.data.password) {
wx.showToast({
title: '与第一次输入密码不同，请再次确认密码',
icon: 'none',
duration: 1000
})
}
},
//提交时验证
submit: function () {
if (this.data.registerParam == 1 && (/^1[3456789]\d{9}$/).test(this.data.phoneNum) && (/^(31|32)\d{8}$/).test(this.data.stuNumber) && this.data.password.length >= 6 && this.data.password == this.data.rePassword) {
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 1000
})
}else if(this.data.registerParam == 0 && (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/).test(this.data.email) && (/^(31|32)\d{8}$/).test(this.data.stuNumber) && this.data.password.length >= 6 && this.data.password == this.data.rePassword) {
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 1000
})
}else {
wx.showToast({
title: '注册失败',
icon: 'none',
duration: 1000
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
里面用到的logo图片
