uniapp登陆页面功能
首先是布局<template><view><view class="d-flex a-center j-sb py-2 px-3 text-light-muted"><view class="iconfont icon-shanchu1" ></view><view class="font-md" >忘记密码</view
·
首先是布局
<template>
<view>
<view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
<view class="iconfont icon-shanchu1" ></view>
<view class="font-md" >忘记密码</view>
</view>
<view class="p-5">
<view class="font-big mb-5">密码登录</view>
<input type="text" class="border-bottom mb-4 uni-input px-0"
placeholder="请输入手机号/邮箱/账号" v-model="username"
placeholder-class="text-light-muted"
/>
<input type="text" class="border-bottom mb-4 uni-input px-0"
placeholder="请输入密码" v-model="password"
placeholder-class="text-light-muted"/>
<view class="py-2 w-100 d-flex a-center j-center main-bg-color text-white rounded font-md mb-4" hover-class="main-bg-hover-color" >
登录
</view>
<label class="checkbox d-flex a-center" >
<checkbox :checked="check"/>
<text class="text-light-muted font">已阅读并同意XXXXX协议</text>
</label>
</view>
</view>
</template>
获取登陆数据用post请求:
在login页面中引入
import {getLogin} from '../../utils/login.js'
之后获取接口
getLogin(this.username,this.password).then(res=>{
console.log(res);
})
写一个正则
rules: {
username: [{
rule: /^[a-zA-Z]\w{4,17}$/,
msg: "账号必须字母开头,长度在5~18之间,只能包含字母、数字和下划线"
}
],
password: [{
rule: /^.{5,20}$/,
msg: "密码长度必须为5-20个字符"
}]
},
methods: {
// 回退到四个tabbar中的我的页面,使用uni.switchTab
goBack() {
uni.switchTab({
url: '../myfile/myfile'
})
},
// 忘记密码
forget() {
console.log('忘记密码');
},
// 写个函数用来判断复选框是否勾选并提示
validate(key) {
var check = true;
this.rules[key].forEach(v => {
// uni-app 判断输入是否符合要求
if (!v.rule.test(this[key])) {
uni.showToast({
title: v.msg,
// 勾号消失
icon: 'none'
})
return check = false
}
})
return check
},
// 点击登陆按钮
submit() {
if (!this.check) {
return uni.showToast({
title: '请先同意协议',
icon: 'none'
})
}
if (!this.validate('username')) return;
if (!this.validate('password')) return;
getLogin(this.username, this.password).then(res => {
console.log(res);
uni.switchTab({
url: '../myfile/myfile'
})
})
},
}
即可实现功能
更多推荐
已为社区贡献11条内容
所有评论(0)