uniapp登陆页面功能_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>
		</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'
					})
				})
			},
		}

即可实现功能