微信小程序，短信验证码登录，设置密码，密码强度校验

由于长期不在线，有问题及时回复不了，如果觉得可以，有问题的可以直接加微信：PrintUserInfo

一，业务登录有密码登录和短信验证码登录；

1，用密码登录的时候是用户已经注册了的情况下，当用户没有注册或者忘记密码的时候可以用短息验证码的方式登录，短信验证码登录的时候，，调的后台接口会给我返回一个用户信息，，用户信息中包含用户密码等，如果用户信息包含有用户密码，就表明用户是注册过的，否则就是新用户，当用户为新用户的时候，，让用户设置登录名和密码，，并对密码进行强度校验，下面是ui界面：

二，验证码登录的代码上传js就行了(因为wxml和wxss是差不多的，样式可以共用)，设置密码的我上传wxml+wxss+js:

下面是手机验证码的js：（zenze.js是自己写的一个手机号身份证等用的正则表达式）。

// pages/home/login/register.js

var zhenze = require('../../../utils/zhenze.js').check;

var app = getApp(), that;

var time = null;

Page({

data: {

show: false,

show2: false,

phone: '',

code:'',

btn_show: false,

code_show:true,

time:5,

timer:null

},

bindblur_phone:function(e){

if (!zhenze.isTelAvailable(e.detail.value)){

that.setData({

show: true,

})

}else{

that.setData({

show: false,

})

}

},

change_phone: function (e) {

that.setData({

show: false,

phone: e.detail.value

})

if (zhenze.isTelAvailable(e.detail.value) && that.data.code != '') {

that.setData({

btn_show: true

})

} else {

that.setData({

btn_show: false

})

}

},

change_code: function (e) {

that.setData({

show2: false,

code: e.detail.value

})

if (e.detail.value != '' && that.data.phone != '') {

that.setData({

btn_show: true

})

} else {

that.setData({

btn_show: false

})

}

},

get_code:function(){

if (!zhenze.isTelAvailable(that.data.phone)) {

that.setData({

show: true,

})

} else {

that.setData({

show: false,

})

wx.showLoading({

title: '发送中',

})

clearInterval(that.data.timer);

var data = {

"data": {

"phone": that.data.phone

}

};

app.wx_Request('post', app.globalData.user_url + "mobile/send", "app_json", data, (res) => {

console.log(res);

wx.hideLoading();

if (res.code == 200) {

time = 60;

that.setData({

code_show: false,

timer: setInterval(function () {

time--

that.setData({

time: time

})

if (time == 0) {

time = 60;

clearInterval(that.data.timer);

that.setData({

code_show: true,

time: time

})

}

}, 1000)

})

} else {

wx.showToast({

title: res.errorMessage,

icon:'none'

})

}

}, (err) => {

console.log(err.data);

wx.hideLoading();

})

}

},

onLoad: function (options) {

that = this;

},

formSubmit: function (e) {

console.log('form发生了submit事件，携带数据为：', e.detail.value);

if (e.detail.value.phone == '') {

wx.showToast({

title: '请输入手机号',

icon: 'none'

})

that.setData({

show: true,

})

return;

}

if (e.detail.value.checkCode == '') {

wx.showToast({

title: '请输入短信验证码',

icon: 'none'

})

that.setData({

show2: true,

})

return;

}

wx.showLoading({

title: '登录中',

})

var data = {

"data": e.detail.value

}

app.wx_Request('post', app.globalData.user_url + "systemUser/loginByMobile?appCode=123456", "app_json", data, (res) => {

console.log(res);

wx.hideLoading();

if (res.code == 200) {

var user_info = res.data;

// wx.setStorageSync("user_info", user_info);

// wx.setStorageSync("user_id", user_info.userCode);

// wx.showToast({

// title: '登录成功！',

// icon: 'none',

// duration: 1500

// })

// setTimeout(function () {

// wx.navigateTo({

// url: '/pages/index/index',

// })

// }, 1500)

} else {

wx.showToast({

title: res.errorMessage,

icon: 'none',

})

that.setData({

show2: true,

btn_show: true,

})

}

}, (err) => {

console.log(err.data);

wx.hideLoading();

})

},

formReset: function () {

console.log('form发生了reset事件')

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

that.setData({

timer: null

})

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

that.setData({

timer: null

})

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

that.setData({

timer:null

})

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

三。

1.设置密码登录名的wxml:

<view class="login_box">

<form bindsubmit="formSubmit" bindreset="formReset">

<view class="section flex-j-a">

<view class="section__title">

<image src="/img/home/uers_head.png"></image>

</view>

<input name="loginName" bindinput="change_loginName" placeholder="请输入登录账号" placeholder-style="color:#afb5b5;font-size:28rpx;"/>

</view>

<view class="login_err">{{show?'账号输入错误':''}}</view>

<view class="section flex-j-a">

<view class="section__title">

<image src="/img/home/shurupa.png"></image>

</view>

<input name="password" maxlength="20" type="{{password_e}}" bindinput="change_password" placeholder="请设置登录密码" placeholder-style="color:#afb5b5;font-size:28rpx;"/>

<image wx:if='{{eye_change}}' src='/img/home/eye.png' bindtap='change_pas' class='eye'></image>

<image wx:else src='/img/home/eye-no.png' bindtap='change_pas_y' class='eye'></image>

</view>

<view class="pass_qd">

<view class="flex-j-a">

<view>{{pass_qd}}</view>

<view class="pass_color" style="background:{{index<=pass_index?pass_color:'#CBCBCB'}}" wx:for="[3]"></view>

</view>

<view>请至少使用8个字符，请勿使用容易猜到的密码</view>

</view>

<view class="section flex-j-a">

<view class="section__title">

<image src="/img/home/querenmm.png"></image>

</view>

<input name="password2" type="{{password_e2}}" bindinput="change_password2" placeholder="请确认登录密码" placeholder-style="color:#afb5b5;font-size:28rpx;"/>

<image wx:if='{{eye_change2}}' src='/img/home/eye.png' bindtap='change_pas2' class='eye'></image>

<image wx:else src='/img/home/eye-no.png' bindtap='change_pas_y2' class='eye'></image>

</view>

<view class="login_err">{{show2?'两次密码输入不一致':''}}</view>

<button form-type="submit" class="submit {{btn_show?'green':''}}">提交</button>

</form>

</view>

2.wxss

page{

background: #F6F6F6;

}

.login_box{

padding: 20rpx 0;

}

.section{

justify-content: flex-start;

line-height: 60rpx;

}

.section__title image{

width: 33rpx;

height: 35rpx;

}

.login_err{

color: red;

font-size: 23rpx;

line-height: 36rpx;

padding-left: 70rpx;

}

.submit{

width: 630rpx;

height: 72rpx;

line-height: 72rpx;

margin: 50rpx auto 40rpx auto;

border-radius: 35rpx;

border: 0;

background: #CBCBCB;

text-align: center;

letter-spacing: 2rpx;

color: #fff;

font-size: 28rpx;

}

.submit.green{

background: #57B28D;

color: #fff;

}

.eye{

width:45rpx;

height:27rpx;

display:block;

}

.color_ddd{

font-size: 26rpx;

}

.color_ddd .shux{

width: 4rpx;

height: 25rpx;

margin: 0 20rpx;

background: #CBCBCB;

}

 

.pass_qd{

padding:0 30rpx;

}

.pass_color{

width: 80rpx;

height: 15rpx;

border-radius: 18rpx;

margin: 0 10rpx;

}

.pass_qd view{

font-size: 23rpx;

line-height: 45rpx;

}

.pass_qd .flex-j-a{

justify-content: start;

}

3.设置密码和登录名的js

// pages/home/login/login.js

var app = getApp(), that;

Page({

data: {

pass_qd:'弱',

pass_color:'red',

pass_index:0,

show: true,

show2: true,

loginName: '',

password: '',

password2: '',

btn_show: false,

eye_change: true,

eye_change2: true,

password_e: 'password',

password_e2: 'password',

},

change_pas: function () {

this.setData({

password_e: 'text',

eye_change: !this.data.eye_change

})

},

change_pas_y: function () {

this.setData({

password_e: 'password',

eye_change: !this.data.eye_change

})

},

change_pas2: function () {

this.setData({

password_e2: 'text',

eye_change2: !this.data.eye_change2

})

},

change_pas_y2: function () {

this.setData({

password_e2: 'password',

eye_change2: !this.data.eye_change2

})

},

change_loginName: function (e) {

that.setData({

show: false,

loginName: e.detail.value

})

if (e.detail.value == ''){

that.setData({

show: true

})

}

if (e.detail.value != '' && that.data.password != '') {

if (that.data.password == that.data.password2 && that.data.password.length>7) {

that.setData({

btn_show: true

})

}

} else {

that.setData({

btn_show: false

})

}

},

change_password: function (e) {

that.setData({

password: e.detail.value

})

that.ver_code('btn_show');

// 密码强度验证

var th_pass = e.detail.value;

var code_num = 0;

if (e.detail.value.length>7){

if (/[0-9]/.test(th_pass)) {

code_num++;

} else {

code_num--;

}

if (/[a-z]/.test(th_pass)) {

code_num++;

} else {

code_num--;

}

if (/[A-Z]/.test(th_pass)) {

code_num++;

} else {

code_num--;

}

}

if (code_num<=0){

that.setData({

pass_qd: '弱',

pass_color: 'red',

pass_index: 0,

})

} else if (code_num==1){

that.setData({

pass_qd: '中',

pass_color: 'blue',

pass_index: 1,

})

}else{

that.setData({

pass_qd: '强',

pass_color: 'green',

pass_index: 2,

})

}

},

change_password2:function(e){

that.setData({

password2: e.detail.value

})

that.ver_code('btn_show');

},

ver_code:function(str){

if(that.data.password==that.data.password2){

that.setData({

show2: false

})

if (str == "btn_show" && that.data.loginName != '' && that.data.password.length > 7) {

that.setData({

btn_show: true

})

} else {

that.setData({

btn_show: false

})

}

}else{

that.setData({

show2:true,

btn_show: false

})

}

},

onLoad: function (options) {

that = this;

},

formSubmit: function (e) {

console.log('form发生了submit事件，携带数据为：', e.detail.value);

if (e.detail.value.proof == '') {

wx.showToast({

title: '请输入登录账号',

icon: 'none'

})

that.setData({

show: true,

})

return;

}

if (e.detail.value.password == '') {

wx.showToast({

title: '请输入登录密码',

icon: 'none'

})

that.setData({

show2: true,

})

return;

}

wx.showLoading({

title: '登录中',

})

var data = {

"data": e.detail.value

}

app.wx_Request('post', app.globalData.user_url + "systemUser/login?appCode=123456", "app_json", data, (res) => {

console.log(res);

wx.hideLoading();

if (res.code == 200) {

var user_info = res.data;

wx.setStorageSync("user_info", user_info);

wx.setStorageSync("user_id", user_info.userCode);

wx.showToast({

title: '登录成功！',

icon: 'none',

duration: 1500

})

setTimeout(function () {

wx.navigateTo({

url: '/pages/index/index',

})

}, 1500)

} else {

wx.showToast({

title: res.errorMessage,

icon: 'none',

})

that.setData({

show2: true,

btn_show: true,

})

}

}, (err) => {

console.log(err.data);

wx.hideLoading();

})

},

formReset: function () {

console.log('form发生了reset事件')

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

4.上面的js我就做到验证完之后可以提交这一步，表单的提交是之前的用户名登录那儿过来的，，这儿改一下接口就行。