页面效果:
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;
}