uniapp登陆页面功能

首先是布局

 

获取登陆数据用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'
					})
				})
			},
		}

即可实现功能