login.vue

<template>
	<view class="content">
		<image class="logo" src="/static/login/login.png"></image>
		<view class="text-area">
			<uni-forms :modelValue="formData" :rules="loginRules" ref="form"  validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="phone" required label="手机号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
						placeholder="请输入手机号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" required label="密码">
					<uni-easyinput type="password" :inputBorder="true" v-model="formData.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button @click="login(form)">登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	
	</view>
</template>

<script>
	// uni.getLocation({
	// 	type: 'wgs84',
	// 	success: function(res) {
	// 		console.log('当前位置的经度：' + res.longitude);
	// 		console.log('当前位置的纬度：' + res.latitude);
	// 	}
	// });

	export default {
		name: 'login',
		components: {},
		onLoad() {
			uni.hideTabBar();
		},
		data() {
			return {
				formData: {
					phone: '',
					password: ''
				},
				loginRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value === '') {
									callback(new Error('手机号不能为空'))
								} else {
									const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
									const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
									if ((reg.test(value) || reg2.test(value))) {
										this.yzmshow = true
										callback()
									} else {
										callback(new Error('请输入正确的手机号'))
									}
								}
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else {
									callback();
								}
							}
						}]
					},
				}
			}
		},
		methods: {
			login(validateForm) {
				// this.$refs[validateForm].validate(valid => {
				// 	if (valid) {
				// 		//
				// 	}
				// })
			}
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 480rpx;
		width: 500rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
</style>